windmill-components 1.52.0 → 1.55.0

package/components/graph/FlowGraph.svelte

@@ -4,39 +4,51 @@ import { FlowStatusModule, RawScript } from '../../gen';
 import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
 import { defaultIfEmptyString, truncateRev } from '../../utils';
 import { createEventDispatcher } from 'svelte';
-import { numberToChars } from '../flows/utils';
+import { charsToNumber, numberToChars } from '../flows/utils';
 export let modules = [];
 export let failureModule = undefined;
 export let minHeight = 0;
 export let notSelectable = false;
 export let flowModuleStates = undefined;
 let selectedNode = undefined;
-const idGenerator = createIdGenerator();
+let idGenerator;
 let nestedNodes;
 let nodes = [];
 let edges = [];
 let width, height;
+let errorHandlers = {};
 let dispatch = createEventDispatcher();
 $: {
     width && height && minHeight && selectedNode && flowModuleStates;
+    nodes = edges = [];
+    errorHandlers = {};
+    createGraph();
+}
+async function createGraph() {
     if (modules) {
-        createGraph(modules, failureModule);
+        idGenerator = createIdGenerator();
     }
     else {
         nodes = edges = [];
+        return;
     }
-}
-function createGraph(modules, failureModule) {
     nestedNodes = nodes = [];
-    nestedNodes.push(createVirtualNode(getParentIds(), 'Flow start'));
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Input'));
     modules.forEach((m) => {
         const item = getConvertedFlowModule(m);
         item && nestedNodes.push(item);
     });
-    const endParentIds = getParentIds();
-    nestedNodes.push(createVirtualNode(getParentIds(), 'Flow end'));
-    if (failureModule) {
-        nestedNodes.push(createErrorHandler(endParentIds, failureModule));
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Result'));
+    if (!flowModuleStates) {
+        if (failureModule)
+            nestedNodes.push(createErrorHandler(failureModule));
+    }
+    else {
+        Object.entries(flowModuleStates ?? [])
+            .filter(([k, v]) => k.startsWith('failure'))
+            .forEach(([k, v]) => {
+            nestedNodes.push(createErrorHandler({ id: k }, v.parent_module));
+        });
     }
     const flatNodes = flattenNestedNodes(nestedNodes);
     const layered = layoutNodes(flatNodes);
@@ -67,6 +79,9 @@ function getConvertedFlowModule(module, parent = undefined, edgeLabel = undefine
         const branches = module.value.branches.map((b) => b.modules);
         return flowModuleToBranch(module, branches, [], parent);
     }
+    else if (type === 'flow') {
+        return flowModuleToNode(parentIds, module.id, module.summary || 'Flow ' + module.value.path, 'inline', module, undefined, edgeLabel);
+    }
     return flowModuleToNode(parentIds, module.id, module.summary || 'Identity step', 'inline', module, undefined, edgeLabel);
 }
 function getParentIds(items = undefined) {
@@ -77,7 +92,8 @@ function getParentIds(items = undefined) {
     if (!item)
         return [];
     if (isNode(item)) {
-        return ['' + item.id];
+        const id = numberToChars(item.id);
+        return [id];
     }
     else if (isLoop(item)) {
         return getParentIds(item.items);
@@ -90,16 +106,20 @@ function getParentIds(items = undefined) {
 function getStateColor(state) {
     switch (state) {
         case FlowStatusModule.type.SUCCESS:
-            return 'rgb(34 197 94)';
+            return 'rgb(193, 255, 216)';
         case FlowStatusModule.type.FAILURE:
             return 'rgb(248 113 113)';
         case FlowStatusModule.type.IN_PROGRESS:
-            return 'rgb(253 224 71)';
+            return 'rgb(253, 240, 176)';
+        case FlowStatusModule.type.WAITING_FOR_EVENTS:
+            return 'rgb(229, 176, 253)';
+        case FlowStatusModule.type.WAITING_FOR_EXECUTOR:
+            return 'rgb(255, 208, 193)';
         default:
             return '#fff';
     }
 }
-function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeLabel) {
+function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeLabel, header) {
     const langImg = {
         deno: '/icons/ts-lang.svg',
         go: '/icons/go-lang.svg',
@@ -112,9 +132,9 @@ function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeL
         inline: ''
     };
     const wrapperWidth = lang ? 'w-[calc(100%-70px)]' : 'w-[calc(100%-50px)]';
-    const graphId = idGenerator.next().value;
+    let nodeId = id ?? numberToChars(idGenerator.next().value - 1);
     return {
-        id: graphId,
+        id: charsToNumber(nodeId),
         position: { x: -1, y: -1 },
         data: {
             html: `
@@ -126,23 +146,25 @@ function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeL
 						${lang ? `<img src="${langImg[lang]}" class="grayscale">` : ''}
 						${host != 'inline' ? `<img src="${hostImg[host]}" class="grayscale">` : ''}
 						<span class="center-center font-semibold bg-indigo-100 text-indigo-800 rounded px-1 pb-[2px] ml-[2px]">
-							${id ?? numberToChars(graphId - 1)}
+							${nodeId}
 						</span>
 					</div>
 				</div>
+				<div class="text-2xs absolute -top-6 text-gray-600 truncate">${flowModuleStates?.[nodeId]?.scheduled_for ?? header ?? ''}<div>
 			`
         },
         host,
         width: NODE.width,
         height: NODE.height,
-        borderColor: selectedNode == onClickDetail.id ? 'black' : '#999',
-        bgColor: selectedNode == onClickDetail.id
-            ? '#f5f5f5'
-            : getStateColor(flowModuleStates?.[onClickDetail.id]),
+        borderColor: selectedNode == nodeId ? 'black' : '#999',
+        bgColor: selectedNode == nodeId ? '#f5f5f5' : getStateColor(flowModuleStates?.[nodeId]?.type),
         parentIds,
         clickCallback: (node) => {
             if (!notSelectable) {
-                selectedNode = onClickDetail.id;
+                selectedNode = nodeId;
+            }
+            if (onClickDetail.id == undefined) {
+                onClickDetail.id = nodeId;
             }
             dispatch('click', onClickDetail);
         },
@@ -155,14 +177,16 @@ function flowModuleToLoop(modules, module, parent = undefined) {
     const loop = {
         type: 'loop',
         items: [
-            flowModuleToNode(getParentIds(parent), module.id, module.summary || `For Loop: ${defaultIfEmptyString(expr ?? '', 'TBD')}`, 'inline', module, undefined)
+            flowModuleToNode(getParentIds(parent), module.id, module.summary || `For Loop: ${defaultIfEmptyString(expr ?? '', 'TBD')}`, 'inline', module, undefined, undefined, flowModuleStates?.[module.id]?.iteration_total
+                ? 'Iteration ' + flowModuleStates?.[module.id]?.iteration_total
+                : '')
         ]
     };
     modules.forEach((module) => {
         const item = getConvertedFlowModule(module, loop.items);
         item && loop.items.push(item);
     });
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect iterations' results of For Loop ${module.id}`));
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect iterations' results of For Loop ${module.id}`, undefined, 1000));
     return loop;
 }
 function flowModuleToBranch(module, branches, edgesLabel, parent = undefined) {
@@ -173,7 +197,7 @@ function flowModuleToBranch(module, branches, edgesLabel, parent = undefined) {
             : 'Run one branch given predicate', 'inline', module, undefined),
         items: []
     };
-    const branchParent = [branch.node.id.toString()];
+    const branchParent = [numberToChars(branch.node.id)];
     if (branches.length == 0) {
         branch.items.push([createVirtualNode(branchParent, 'No branches')]);
     }
@@ -184,7 +208,7 @@ function flowModuleToBranch(module, branches, edgesLabel, parent = undefined) {
         }
         else {
             modules.forEach((module) => {
-                const item = getConvertedFlowModule(module, items.length ? items : branch.node.id.toString(), edgesLabel[i]);
+                const item = getConvertedFlowModule(module, items.length ? items : numberToChars(branch.node.id), edgesLabel[i]);
                 item && items.push(item);
             });
         }
@@ -211,7 +235,7 @@ function flattenNestedNodes(nestedNodes, nodes = []) {
     return array;
 }
 function layoutNodes(nodes) {
-    const stratify = dagStratify().id(({ id }) => '' + id);
+    const stratify = dagStratify().id(({ id }) => numberToChars(id));
     const dag = stratify(nodes);
     const layout = sugiyama()
         .decross(decrossOpt())
@@ -221,7 +245,7 @@ function layoutNodes(nodes) {
     return {
         nodes: dag.descendants().map((des) => ({
             ...des.data,
-            id: +des.data.id,
+            id: des.data.id,
             position: {
                 x: des.x ? des.x + (width - boxSize.width - NODE.width) / 2 : 0,
                 y: des.y || 0
@@ -234,24 +258,51 @@ function createEdges(nodes) {
     const edges = [];
     nodes.forEach((node) => {
         node.parentIds.forEach((pid, i) => {
-            edges.push({
-                id: `e-${pid}-${node.id}`,
-                source: +pid,
-                target: node.id,
-                labelBgColor: 'white',
-                arrow: true,
-                animate: false,
-                noHandle: false,
-                label: node.edgeLabel
-                // type: 'smoothstep'
-            });
+            // skip virtual nodes such as collect result
+            if (errorHandlers[pid] && node.id < 900 && nodes.find((x) => x.id == errorHandlers[pid])) {
+                edges.push({
+                    id: `e-${pid}-${node.id}`,
+                    source: charsToNumber(pid),
+                    target: errorHandlers[pid],
+                    labelBgColor: 'white',
+                    arrow: true,
+                    animate: false,
+                    noHandle: false,
+                    label: node.edgeLabel
+                    // type: 'smoothstep'
+                });
+                edges.push({
+                    id: `e-${pid}-${node.id}`,
+                    source: errorHandlers[pid],
+                    target: node.id,
+                    labelBgColor: 'white',
+                    arrow: true,
+                    animate: false,
+                    noHandle: false,
+                    label: node.edgeLabel
+                    // type: 'smoothstep'
+                });
+            }
+            else {
+                edges.push({
+                    id: `e-${pid}-${node.id}`,
+                    source: charsToNumber(pid),
+                    target: node.id,
+                    labelBgColor: 'white',
+                    arrow: true,
+                    animate: false,
+                    noHandle: false,
+                    label: node.edgeLabel
+                    // type: 'smoothstep'
+                });
+            }
         });
     });
     return edges;
 }
-function createVirtualNode(parentIds, label, edgesLabel) {
+function createVirtualNode(parentIds, label, edgesLabel, offset) {
     return {
-        id: idGenerator.next().value,
+        id: -idGenerator.next().value - 1 + (offset ?? 0),
         position: { x: -1, y: -1 },
         data: {
             html: `
@@ -262,38 +313,53 @@ function createVirtualNode(parentIds, label, edgesLabel) {
         },
         width: NODE.width,
         height: NODE.height,
-        borderColor: '#999',
-        bgColor: '#d4e4ff',
-        parentIds
+        borderColor: selectedNode == label ? 'black' : '#999',
+        bgColor: selectedNode == label ? '#f5f5f5' : '#d4e4ff',
+        parentIds,
+        clickCallback: (node) => {
+            if (!notSelectable) {
+                selectedNode = label;
+            }
+            dispatch('click', label);
+        }
     };
 }
-function createErrorHandler(parentIds, module) {
+function createErrorHandler(mod, parent_module) {
+    const nId = -idGenerator.next().value - 1 + 1100;
+    parent_module && (errorHandlers[parent_module] = nId);
     return {
-        id: -1,
+        id: nId,
         position: { x: -1, y: -1 },
         data: {
             html: `
-				<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
-					Error handler
+				<div class="w-full flex justify-between items-center px-1">
+					<div class="text-left ellipsize text-2xs truncate">
+						Error Handler
+					</div>
+					<div class="flex items-center">
+						<span class="center-center font-semibold bg-indigo-100 text-indigo-800 rounded px-1 pb-[2px] ml-[2px]">
+							${mod.id}
+						</span>
+					</div>
 				</div>
 			`
         },
         width: NODE.width,
         height: NODE.height,
-        bgColor: 'rgb(248 113 113)',
-        borderColor: '#999',
-        parentIds,
+        bgColor: selectedNode == mod.id ? '#f5f5f5' : getStateColor(flowModuleStates?.[mod.id]?.type),
+        borderColor: selectedNode == mod.id ? 'black' : '#999',
+        parentIds: parent_module ? [parent_module] : [],
         clickCallback: (node) => {
             if (!notSelectable) {
-                selectedNode = module.id;
+                selectedNode = mod.id;
             }
-            dispatch('click', module);
+            dispatch('click', mod);
         }
     };
 }
 </script>
 
-<div bind:clientWidth={width} class="w-full h-full overflow-hidden">
+<div bind:clientWidth={width} class="w-full h-full overflow-hidden relative">
 	{#if width && height}
 		<Svelvet {nodes} {width} {edges} {height} bgColor="rgb(249 250 251)" />
 	{/if}

package/components/graph/FlowGraph.svelte.d.ts

@@ -1,12 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FlowModule, FlowStatusModule } from '../../gen';
+import { type FlowModule } from '../../gen';
+import { type GraphModuleState } from '.';
 declare const __propDef: {
     props: {
         modules?: FlowModule[] | undefined;
         failureModule?: FlowModule | undefined;
         minHeight?: number | undefined;
         notSelectable?: boolean | undefined;
-        flowModuleStates?: Record<string, FlowStatusModule.type> | undefined;
+        flowModuleStates?: Record<string, GraphModuleState> | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/graph/model.d.ts

@@ -1,3 +1,4 @@
+import type { FlowStatusModule } from "../../gen";
 import type { Node as SvelvetNode } from "svelvet";
 export type ModuleHost = 'workspace' | 'inline' | 'hub';
 export type Node = SvelvetNode & {
@@ -15,6 +16,16 @@ export type Branch = {
     items: NestedNodes[];
 };
 export type GraphItem = Node | Loop | Branch;
+export type GraphModuleState = {
+    type: FlowStatusModule.type;
+    logs?: string;
+    result?: any;
+    scheduled_for?: string;
+    job_id?: string;
+    parent_module?: string;
+    iteration_total?: number;
+    retries?: number;
+};
 export type NestedNodes = GraphItem[];
 export declare function isNode(item: GraphItem | NestedNodes | undefined): item is Node;
 export declare function isLoop(item: GraphItem | NestedNodes | undefined): item is Loop;

package/components/home/ItemsList.svelte

@@ -0,0 +1,265 @@
+<script>import CenteredPage from '../CenteredPage.svelte';
+import { AppService, FlowService, ListableApp, Script, ScriptService } from '../../gen';
+import { superadmin, userStore, workspaceStore } from '../../stores';
+import { Skeleton, ToggleButton, ToggleButtonGroup } from '../common';
+import { canWrite } from '../../utils';
+import ShareModal from '../ShareModal.svelte';
+import { Code2, LayoutDashboard } from 'lucide-svelte';
+export let filter = '';
+import ScriptRow from '../common/table/ScriptRow.svelte';
+import FlowRow from '../common/table/FlowRow.svelte';
+import AppRow from '../common/table/AppRow.svelte';
+import NoItemFound from './NoItemFound.svelte';
+import ListFilters from './ListFilters.svelte';
+import SearchItems from '../SearchItems.svelte';
+import { Icon } from 'svelte-awesome';
+import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+let scripts;
+let flows;
+let apps;
+let filteredItems = [];
+let itemKind = 'all';
+let shareModalScripts;
+let shareModalFlows;
+let loading = true;
+async function loadScripts() {
+    const loadedScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore,
+        perPage: 300
+    });
+    scripts = loadedScripts.map((script) => {
+        return {
+            canWrite: canWrite(script.path, script.extra_perms, $userStore) &&
+                script.workspace_id == $workspaceStore &&
+                !$userStore?.operator,
+            ...script
+        };
+    });
+    loading = false;
+}
+async function loadFlows() {
+    flows = (await FlowService.listFlows({ workspace: $workspaceStore })).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 })).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
+        ? 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()
+            }))
+        ].sort((a, b) => a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1);
+$: preFilteredItems =
+    ownerFilter != undefined
+        ? combinedItems?.filter((x) => x.path.startsWith(ownerFilter ?? '') && (x.type == itemKind || itemKind == 'all'))
+        : combinedItems?.filter((x) => x.type == itemKind || itemKind == 'all');
+let ownerFilter = undefined;
+$: {
+    if (($userStore || $superadmin) && $workspaceStore) {
+        loadScripts();
+        loadFlows();
+        loadApps();
+    }
+}
+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();
+</script>
+
+<SearchItems
+	{filter}
+	items={preFilteredItems}
+	bind:filteredItems
+	f={(x) => (x.summary ? x.summary + ' (' + x.path + ')' : x.path)}
+	{opts}
+/>
+
+<ShareModal
+	bind:this={shareModalScripts}
+	kind="script"
+	on:change={() => {
+		loadScripts()
+	}}
+/>
+
+<ShareModal
+	bind:this={shareModalFlows}
+	kind="flow"
+	on:change={() => {
+		loadFlows()
+	}}
+/>
+
+<CenteredPage>
+	<div class="flex flex-col md:flex-row gap-2 items-center sm:justify-between w-full">
+		<div>
+			<ToggleButtonGroup bind:selected={itemKind}>
+				<ToggleButton light position="left" value="all" size="sm">All</ToggleButton>
+				<ToggleButton light position="center" value="script" size="sm">
+					<div class="flex gap-1 items-center">
+						<Code2 size={16} />
+						Scripts
+					</div>
+				</ToggleButton>
+				<ToggleButton light position="center" value="flow" size="sm">
+					<div class="flex gap-1 items-center">
+						<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
+						Flows
+					</div>
+				</ToggleButton>
+				<ToggleButton light position="right" value="app" size="sm">
+					<div class="flex gap-1 items-center">
+						<LayoutDashboard size={16} />
+						Apps
+					</div>
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
+
+		<div class="relative text-gray-600 w-full">
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				autofocus
+				placeholder="Search Scripts, Flows & Apps"
+				bind:value={filter}
+				class="bg-white !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>
+	</div>
+
+	<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
+	<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}
+			<div class="border rounded-md divide-y divide-gray-200 mb-80">
+				<!-- <VirtualList {items} let:item bind:start bind:end> -->
+				{#each items ?? [] as item, i (item.type + '/' + item.path)}
+					{#if item.type == 'script'}
+						<ScriptRow
+							starred={item.starred ?? false}
+							marked={item.marked}
+							on:change={loadScripts}
+							script={item}
+							shareModal={shareModalScripts}
+						/>
+					{:else if item.type == 'flow'}
+						<FlowRow
+							starred={item.starred ?? false}
+							marked={item.marked}
+							on:change={loadFlows}
+							flow={item}
+							shareModal={shareModalFlows}
+						/>
+					{:else if item.type == 'app'}
+						<AppRow
+							starred={item.starred ?? false}
+							marked={item.marked}
+							on:change={loadApps}
+							app={item}
+						/>
+					{/if}
+				{/each}
+				<!-- </VirtualList> -->
+			</div>
+			<!-- <span class="text-xs">{pluralize(items?.length ?? 0, 'item')}</span>
+			<span class="text-xs">{`(${start} - ${end})`}</span> -->
+		{/if}
+	</div>
+</CenteredPage>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | 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 SvelteComponentTyped<ItemsListProps, ItemsListEvents, ItemsListSlots> {
+}
+export {};