windmill-components 1.472.1 → 1.472.2

package/package/components/home/ItemsList.svelte

@@ -0,0 +1,455 @@
+<script>import CenteredPage from '../CenteredPage.svelte';
+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';
+export let filter = '';
+export let subtab = 'script';
+import { HOME_SEARCH_SHOW_FLOW, HOME_SEARCH_PLACEHOLDER } from '../../consts';
+import SearchItems from '../SearchItems.svelte';
+import ListFilters from './ListFilters.svelte';
+import NoItemFound from './NoItemFound.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import FlowIcon from './FlowIcon.svelte';
+import { canWrite, getLocalSetting, storeLocalSetting } from '../../utils';
+import { page } from '$app/stores';
+import { setQuery } from '../../navigation';
+import Drawer from '../common/drawer/Drawer.svelte';
+import HighlightCode from '../HighlightCode.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import Item from './Item.svelte';
+import TreeViewRoot from './TreeViewRoot.svelte';
+import Popover from '../meltComponents/Popover.svelte';
+import { getContext } from 'svelte';
+let scripts;
+let flows;
+let apps;
+let raw_apps;
+let filteredItems = [];
+let itemKind = $page.url.searchParams.get('kind') ?? 'all';
+let loading = true;
+let nbDisplayed = 15;
+async function loadScripts(includeWithoutMain) {
+    const loadedScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore,
+        showArchived: archived ? true : undefined,
+        includeWithoutMain: includeWithoutMain ? true : undefined,
+        includeDraftOnly: true
+    });
+    scripts = loadedScripts.map((script) => {
+        return {
+            canWrite: canWrite(script.path, script.extra_perms, $userStore) && !$userStore?.operator,
+            ...script
+        };
+    });
+    loading = false;
+}
+async function loadFlows() {
+    flows = (await FlowService.listFlows({
+        workspace: $workspaceStore,
+        showArchived: archived ? true : undefined,
+        includeDraftOnly: true
+    })).map((x) => {
+        return {
+            canWrite: canWrite(x.path, x.extra_perms, $userStore) &&
+                x.workspace_id == $workspaceStore &&
+                !$userStore?.operator,
+            ...x
+        };
+    });
+    loading = false;
+}
+async function loadApps() {
+    apps = (await AppService.listApps({ workspace: $workspaceStore, includeDraftOnly: true })).map((app) => {
+        return {
+            canWrite: canWrite(app.path, app.extra_perms, $userStore) &&
+                app.workspace_id == $workspaceStore &&
+                !$userStore?.operator,
+            ...app
+        };
+    });
+    loading = false;
+}
+async function loadRawApps() {
+    raw_apps = (await RawAppService.listRawApps({ workspace: $workspaceStore })).map((app) => {
+        return {
+            canWrite: canWrite(app.path, app.extra_perms, $userStore) &&
+                app.workspace_id == $workspaceStore &&
+                !$userStore?.operator,
+            ...app
+        };
+    });
+    loading = false;
+}
+$: owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort();
+let combinedItems = undefined;
+$: combinedItems =
+    flows == undefined || scripts == undefined || apps == undefined || raw_apps == undefined
+        ? undefined
+        : [
+            ...flows.map((x) => ({
+                ...x,
+                type: 'flow',
+                time: new Date(x.edited_at).getTime()
+            })),
+            ...scripts.map((x) => ({
+                ...x,
+                type: 'script',
+                time: new Date(x.created_at).getTime()
+            })),
+            ...apps.map((x) => ({
+                ...x,
+                type: 'app',
+                time: new Date(x.edited_at).getTime()
+            })),
+            ...raw_apps.map((x) => ({
+                ...x,
+                type: 'raw_app',
+                time: new Date(x.edited_at).getTime()
+            }))
+        ].sort((a, b) => a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1);
+function filterItemsPathsBaseOnUserFilters(item, filterUserFolders) {
+    if ($workspaceStore == 'admins')
+        return true;
+    if (filterUserFolders) {
+        return !item.path.startsWith('u/') || item.path.startsWith('u/' + $userStore?.username + '/');
+    }
+    else {
+        return true;
+    }
+}
+$: preFilteredItems =
+    ownerFilter != undefined
+        ? combinedItems?.filter((x) => x.path.startsWith(ownerFilter + '/') &&
+            (x.type == itemKind || itemKind == 'all') &&
+            filterItemsPathsBaseOnUserFilters(x, filterUserFolders))
+        : combinedItems?.filter((x) => (x.type == itemKind || itemKind == 'all') &&
+            filterItemsPathsBaseOnUserFilters(x, filterUserFolders));
+let ownerFilter = undefined;
+$: if ($workspaceStore) {
+    ownerFilter = undefined;
+}
+$: {
+    if ($userStore && $workspaceStore) {
+        loadScripts(includeWithoutMain);
+        loadFlows();
+        if (!archived) {
+            loadApps();
+            loadRawApps();
+        }
+        else {
+            apps = [];
+            raw_apps = [];
+        }
+    }
+}
+const cmp = new Intl.Collator('en').compare;
+const opts = {
+    sort: (info, haystack, needle) => {
+        let { idx, chars, terms, interLft2, interLft1, 
+        //	interRgt2,
+        //	interRgt1,
+        start, intraIns, interIns } = info;
+        const sortResult = idx
+            .map((v, i) => i)
+            .sort((ia, ib) => 
+        // most contig chars matched
+        chars[ib] - chars[ia] ||
+            // least char intra-fuzz (most contiguous)
+            intraIns[ia] - intraIns[ib] ||
+            // most prefix bounds, boosted by full term matches
+            terms[ib] +
+                interLft2[ib] +
+                0.5 * interLft1[ib] -
+                (terms[ia] + interLft2[ia] + 0.5 * interLft1[ia]) ||
+            // highest density of match (least span)
+            //	span[ia] - span[ib] ||
+            // highest density of match (least term inter-fuzz)
+            interIns[ia] - interIns[ib] ||
+            // earliest start of match
+            start[ia] - start[ib] ||
+            // alphabetic
+            cmp(haystack[idx[ia]], haystack[idx[ib]]) +
+                (preFilteredItems?.[idx[ib]]?.starred ? 100 : 0) -
+                (preFilteredItems?.[idx[ia]]?.starred ? 100 : 0));
+        return sortResult;
+    }
+};
+$: items = filter !== '' ? filteredItems : preFilteredItems;
+function resetScroll() {
+    const element = document.getElementsByTagName('svelte-virtual-list-viewport');
+    const firstElement = element.item(0);
+    if (firstElement) {
+        firstElement.scrollTop = 0;
+    }
+}
+$: items && resetScroll();
+let archived = false;
+const TREE_VIEW_SETTING_NAME = 'treeView';
+const FILTER_USER_FOLDER_SETTING_NAME = 'filterUserFolders';
+const INCLUDE_WITHOUT_MAIN_SETTING_NAME = 'includeWithoutMain';
+let treeView = getLocalSetting(TREE_VIEW_SETTING_NAME) == 'true';
+let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true';
+let includeWithoutMain = getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME)
+    ? getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME) == 'true'
+    : true;
+$: storeLocalSetting(TREE_VIEW_SETTING_NAME, treeView ? 'true' : undefined);
+$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined);
+$: storeLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME, includeWithoutMain ? 'true' : undefined);
+const openSearchWithPrefilledText = getContext('openSearchWithPrefilledText');
+let viewCodeDrawer;
+let viewCodeTitle;
+let script;
+async function showCode(path, summary) {
+    viewCodeTitle = summary || path;
+    await viewCodeDrawer.openDrawer();
+    script = await ScriptService.getScriptByPath({
+        workspace: $workspaceStore,
+        path
+    });
+}
+let collapseAll = true;
+</script>
+
+<SearchItems
+	{filter}
+	items={preFilteredItems}
+	bind:filteredItems
+	f={(x) => (x.summary ? x.summary + ' (' + x.path + ')' : x.path)}
+	{opts}
+/>
+
+<Drawer
+	bind:this={viewCodeDrawer}
+	on:close={() => {
+		setTimeout(() => {
+			viewCodeTitle = undefined
+			script = undefined
+		}, 300)
+	}}
+>
+	<DrawerContent title={viewCodeTitle} on:close={viewCodeDrawer.closeDrawer}>
+		{#if script}
+			<HighlightCode language={script?.language} code={script?.content} />
+		{:else}
+			<Skeleton layout={[[40]]} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<CenteredPage>
+	<div class="flex flex-wrap gap-2 items-center justify-between w-full mt-2">
+		<div class="flex justify-start">
+			<ToggleButtonGroup
+				bind:selected={itemKind}
+				on:selected={() => {
+					if (itemKind != 'all') {
+						subtab = itemKind
+					}
+					setQuery($page.url, 'kind', itemKind)
+				}}
+				class="h-10"
+				let: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}
+				/>
+				{#if HOME_SEARCH_SHOW_FLOW}
+					<ToggleButton
+						value="flow"
+						label="Flows"
+						icon={FlowIcon}
+						class="text-sm px-4 py-2"
+						selectedColor="#14b8a6"
+						{item}
+					/>
+				{/if}
+				<ToggleButton
+					value="app"
+					label="Apps"
+					icon={LayoutDashboard}
+					class="text-sm px-4 py-2"
+					selectedColor="#fb923c"
+					{item}
+				/>
+			</ToggleButtonGroup>
+		</div>
+
+		<div class="relative text-tertiary grow min-w-[100px]">
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				autofocus
+				placeholder={HOME_SEARCH_PLACEHOLDER}
+				bind:value={filter}
+				class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
+			/>
+			<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+				<svg
+					class="h-4 w-4 fill-current"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink"
+					version="1.1"
+					id="Capa_1"
+					x="0px"
+					y="0px"
+					viewBox="0 0 56.966 56.966"
+					style="enable-background:new 0 0 56.966 56.966;"
+					xml:space="preserve"
+					width="512px"
+					height="512px"
+				>
+					<path
+						d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
+					/>
+				</svg>
+			</button>
+		</div>
+		<Button
+			on:click={() => openSearchWithPrefilledText('#')}
+			variant="border"
+			size="sm"
+			spacingSize="lg"
+			wrapperClasses="h-10"
+			color="light"
+			endIcon={{
+				icon: SearchCode
+			}}
+		>
+			Content
+		</Button>
+	</div>
+	<div class="relative">
+		<ListFilters
+			syncQuery
+			bind:selectedFilter={ownerFilter}
+			filters={owners}
+			bottomMargin={false}
+		/>
+		{#if filteredItems?.length == 0}
+			<div class="mt-10" />
+		{/if}
+		{#if !loading}
+			<div class="flex w-full flex-row-reverse gap-2 mt-4 mb-1 items-center h-6">
+				<Popover floatingConfig={{ placement: 'bottom-end' }}>
+					<svelte:fragment slot="trigger">
+						<Button
+							startIcon={{
+								icon: SlidersHorizontal
+							}}
+							nonCaptureEvent
+							iconOnly
+							size="xs"
+							color="light"
+							variant="border"
+							spacingSize="xs2"
+						/>
+					</svelte:fragment>
+					<svelte:fragment slot="content">
+						<div class="p-4">
+							<span class="text-sm font-semibold">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}
+									<Toggle
+										size="xs"
+										bind:checked={includeWithoutMain}
+										options={{ right: 'Include without main function' }}
+									/>
+								{/if}
+							</div>
+						</div>
+					</svelte:fragment>
+				</Popover>
+				{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
+					<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
+				{:else if $userStore?.is_admin || $userStore?.is_super_admin}
+					<Toggle
+						size="xs"
+						bind:checked={filterUserFolders}
+						options={{ right: `Only u/${$userStore.username} and f/*` }}
+					/>
+				{/if}
+				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
+				{#if treeView}
+					<Button
+						btnClasses="py-0 h-6"
+						size="xs"
+						variant="border"
+						color="light"
+						on:click={() => (collapseAll = !collapseAll)}
+						startIcon={{
+							icon: collapseAll ? UnfoldVertical : FoldVertical
+						}}
+					>
+						{#if collapseAll}
+							Expand all
+						{:else}
+							Collapse all
+						{/if}
+					</Button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+	<div>
+		{#if filteredItems == undefined}
+			<div class="mt-4" />
+			<Skeleton layout={[[2], 1]} />
+			{#each new Array(6) as _}
+				<Skeleton layout={[[4], 0.5]} />
+			{/each}
+		{:else if filteredItems.length === 0}
+			<NoItemFound />
+		{:else if treeView}
+			<TreeViewRoot
+				{items}
+				{nbDisplayed}
+				{collapseAll}
+				isSearching={filter !== ''}
+				on:scriptChanged={() => loadScripts(includeWithoutMain)}
+				on:flowChanged={loadFlows}
+				on:appChanged={loadApps}
+				on:rawAppChanged={loadRawApps}
+				on:reload={() => {
+					loadScripts(includeWithoutMain)
+					loadFlows()
+					loadApps()
+					loadRawApps()
+				}}
+				{showCode}
+			/>
+		{:else}
+			<div class="border rounded-md">
+				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
+					<Item
+						{item}
+						on:scriptChanged={() => loadScripts(includeWithoutMain)}
+						on:flowChanged={loadFlows}
+						on:appChanged={loadApps}
+						on:rawAppChanged={loadRawApps}
+						on:reload={() => {
+							loadScripts(includeWithoutMain)
+							loadFlows()
+							loadApps()
+							loadRawApps()
+						}}
+						{showCode}
+					/>
+				{/each}
+			</div>
+			{#if items && items?.length > 15 && nbDisplayed < items.length}
+				<span class="text-xs"
+					>{nbDisplayed} items out of {items.length}
+					<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+				>
+			{/if}
+		{/if}
+	</div>
+</CenteredPage>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+        subtab?: "script" | "flow" | "app" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ItemsListProps = typeof __propDef.props;
+export type ItemsListEvents = typeof __propDef.events;
+export type ItemsListSlots = typeof __propDef.slots;
+export default class ItemsList extends SvelteComponent<ItemsListProps, ItemsListEvents, ItemsListSlots> {
+}
+export {};

package/package/components/home/ListFilters.svelte

@@ -0,0 +1,87 @@
+<script>import { classNames } from '../../utils';
+import { Folder, User } from 'lucide-svelte';
+import { Badge } from '../common';
+import { APP_TO_ICON_COMPONENT } from '../icons';
+import { onDestroy, onMount } from 'svelte';
+export let filters;
+export let selectedFilter = undefined;
+export let resourceType = false;
+export let queryName = 'filter';
+export let syncQuery = false;
+export let bottomMargin = true;
+const queryChange = (url) => {
+    if (syncQuery) {
+        window.history.pushState(history.state, '', `?${url?.searchParams.toString()}`);
+    }
+};
+const eventListener = (e) => {
+    if (syncQuery) {
+        loadFilterFromUrl();
+    }
+};
+onMount(() => {
+    window.addEventListener('popstate', eventListener);
+});
+onDestroy(() => {
+    window.removeEventListener('popstate', (e) => eventListener(e));
+});
+loadFilterFromUrl();
+function loadFilterFromUrl() {
+    let queryValue = new URL(window.location.href).searchParams.get(queryName) ?? undefined;
+    selectedFilter = queryValue;
+}
+function getIconComponent(name) {
+    return APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
+}
+export async function setQuery(url, key, value) {
+    if (value != undefined) {
+        url.searchParams.set(key, value);
+    }
+    else {
+        url.searchParams.delete(key);
+    }
+    queryChange(url);
+}
+$: filtersAndSelected = selectedFilter
+    ? filters.includes(selectedFilter)
+        ? filters
+        : [selectedFilter, ...filters]
+    : filters;
+</script>
+
+{#if Array.isArray(filtersAndSelected) && filtersAndSelected.length > 0}
+	<div class={`gap-2 w-full flex flex-wrap ${bottomMargin ? 'my-4' : 'mt-4'}`}>
+		{#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={() => {
+						selectedFilter = selectedFilter == filter ? undefined : filter
+						if (selectedFilter) {
+							setQuery(new URL(window.location.href), queryName, selectedFilter)
+						} else {
+							setQuery(new URL(window.location.href), queryName, undefined)
+						}
+					}}
+					color={filter === selectedFilter ? 'blue' : 'gray'}
+					baseClass={filter === selectedFilter ? 'border border-blue-500' : 'border'}
+				>
+					<span style="height: 12px" class="-mt-0.5">
+						{#if resourceType}
+							<svelte:component this={getIconComponent(filter)} height="14px" width="14px" />
+						{: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>
+					{filter}
+					{#if filter === selectedFilter}&cross;{/if}
+				</Badge>
+			</div>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        filters: string[];
+        selectedFilter?: string | undefined;
+        resourceType?: boolean | undefined;
+        queryName?: string | undefined;
+        syncQuery?: boolean | undefined;
+        bottomMargin?: boolean | undefined;
+        setQuery?: ((url: URL, key: string, value: string | undefined) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListFiltersProps = typeof __propDef.props;
+export type ListFiltersEvents = typeof __propDef.events;
+export type ListFiltersSlots = typeof __propDef.slots;
+export default class ListFilters extends SvelteComponent<ListFiltersProps, ListFiltersEvents, ListFiltersSlots> {
+    get setQuery(): (url: URL, key: string, value: string | undefined) => Promise<void>;
+}
+export {};

package/package/components/home/ListFiltersQuick.svelte

@@ -0,0 +1,51 @@
+<script>import { Folder, User, Circle } from 'lucide-svelte';
+import { APP_TO_ICON_COMPONENT } from '../icons';
+import { twMerge } from 'tailwind-merge';
+import { createEventDispatcher } from 'svelte';
+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]];
+}
+const dispatch = createEventDispatcher();
+</script>
+
+{#if Array.isArray(filters) && filters.length > 0}
+	{#each filters as filter (filter)}
+		<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={() => {
+					selectedFilter =
+						selectedAppFilter == filter ? undefined : { kind: 'integrations', name: filter }
+					dispatch('selected')
+				}}
+			>
+				<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>
+		</div>
+	{/each}
+{/if}

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        filters: string[];
+        selectedFilter?: {
+            kind: 'owner' | 'integrations';
+            name: string | undefined;
+        } | undefined;
+        resourceType?: boolean | undefined;
+    };
+    events: {
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListFiltersQuickProps = typeof __propDef.props;
+export type ListFiltersQuickEvents = typeof __propDef.events;
+export type ListFiltersQuickSlots = typeof __propDef.slots;
+export default class ListFiltersQuick extends SvelteComponent<ListFiltersQuickProps, ListFiltersQuickEvents, ListFiltersQuickSlots> {
+}
+export {};

package/package/components/home/NoItemFound.svelte

@@ -0,0 +1,6 @@
+<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>
+	</div>
+</div>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  NoItemFoundProps */
+/** @typedef {typeof __propDef.events}  NoItemFoundEvents */
+/** @typedef {typeof __propDef.slots}  NoItemFoundSlots */
+export default class NoItemFound extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NoItemFoundProps = typeof __propDef.props;
+export type NoItemFoundEvents = typeof __propDef.events;
+export type NoItemFoundSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};