From 70f7d4131eccfb585f0c7f500de4b6c66dc3289f Mon Sep 17 00:00:00 2001 From: Huakun Date: Fri, 28 Feb 2025 07:47:09 -0500 Subject: [PATCH] [feat] Improve list view with fuse search and virtual list (#215) * chore: comment out auto install for on boarding, its behavior and speed is unpredictable * fix: clear action when ui template exits * fix: update extension command search store references * feat(ui): implement virtual list with advanced search and section handling - Add @tanstack/svelte-virtual for efficient list rendering - Integrate Fuse.js for advanced search across list items and sections - Create dynamic virtual list with support for section headers - Enhance list view with flexible search and filtering capabilities - Add new types and components for virtual list management * chore(desktop): bump package version to 0.1.29 --- apps/desktop/package.json | 2 +- .../common/install-code-block.svelte | 4 +- .../standalone/help/deno-install.svelte | 8 +- apps/desktop/src/routes/app/+page.svelte | 4 +- .../app/extension/ui-worker/+page.svelte | 2 + deno.lock | 42 +++++- .../demo-worker-template-ext/package.json | 1 + .../demo-worker-template-ext/src/index.ts | 65 +++++++++ packages/ui/package.json | 3 + .../extension/templates/list-item.svelte | 21 ++- .../extension/templates/list-view.svelte | 128 ++++++++++++++---- .../components/extension/templates/types.ts | 6 + .../templates/virtual-command-group.svelte | 84 ++++++++++++ pnpm-lock.yaml | 97 +++++++++---- 14 files changed, 404 insertions(+), 63 deletions(-) create mode 100644 packages/ui/src/components/extension/templates/types.ts create mode 100644 packages/ui/src/components/extension/templates/virtual-command-group.svelte diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 306f4d0..d9e2071 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -1,6 +1,6 @@ { "name": "@kksh/desktop", - "version": "0.1.28", + "version": "0.1.29", "description": "", "type": "module", "scripts": { diff --git a/apps/desktop/src/lib/components/common/install-code-block.svelte b/apps/desktop/src/lib/components/common/install-code-block.svelte index 64d6ff3..a61906e 100644 --- a/apps/desktop/src/lib/components/common/install-code-block.svelte +++ b/apps/desktop/src/lib/components/common/install-code-block.svelte @@ -75,7 +75,7 @@
-
diff --git a/apps/desktop/src/lib/components/standalone/help/deno-install.svelte b/apps/desktop/src/lib/components/standalone/help/deno-install.svelte index fddfbf8..3b54a58 100644 --- a/apps/desktop/src/lib/components/standalone/help/deno-install.svelte +++ b/apps/desktop/src/lib/components/standalone/help/deno-install.svelte @@ -51,18 +51,18 @@ runtime environment for executing extension code safely. It is optional but recommended.

Choose any installation method below.

-

+

After installation, ensure the `deno` command is accessible from your system's PATH.

-{#if _platform === "macos" || _platform === "linux"} + {#if denoPath}
✅ diff --git a/apps/desktop/src/routes/app/+page.svelte b/apps/desktop/src/routes/app/+page.svelte index a4a4309..312139b 100644 --- a/apps/desktop/src/routes/app/+page.svelte +++ b/apps/desktop/src/routes/app/+page.svelte @@ -207,7 +207,7 @@ No results found. - {#if $devStoreExtCmds.length > 0} + {#if $devSearchExtCmds.length > 0} {/if} - {#if $storeExtCmds.length > 0} + {#if $storeSearchExtCmds.length > 0} { diff --git a/deno.lock b/deno.lock index c3f4313..db78187 100644 --- a/deno.lock +++ b/deno.lock @@ -6,6 +6,7 @@ "npm:@eslint/js@^9.18.0": "9.19.0", "npm:@eslint/js@^9.19.0": "9.19.0", "npm:@eslint/js@^9.21.0": "9.21.0", + "npm:@faker-js/faker@^9.5.1": "9.5.1", "npm:@formkit/auto-animate@~0.8.2": "0.8.2", "npm:@grpc/grpc-js@^1.12.2": "1.12.5", "npm:@grpc/proto-loader@~0.7.13": "0.7.13", @@ -47,6 +48,7 @@ "npm:@tailwindcss/container-queries@~0.1.1": "0.1.1_tailwindcss@3.4.17__postcss@8.5.1", "npm:@tailwindcss/forms@~0.5.10": "0.5.10_tailwindcss@3.4.17__postcss@8.5.1", "npm:@tailwindcss/typography@~0.5.16": "0.5.16_tailwindcss@3.4.17__postcss@8.5.1", + "npm:@tanstack/svelte-virtual@^3.13.2": "3.13.2_svelte@5.19.6__acorn@8.14.0", "npm:@tanstack/table-core@^8.20.5": "8.20.5", "npm:@tauri-apps/api@^2.1.1": "2.2.0", "npm:@tauri-apps/api@^2.2.0": "2.2.0", @@ -121,6 +123,7 @@ "npm:eslint@^9.21.0": "9.21.0", "npm:formsnap@2.0.0-next.1": "2.0.0-next.1_svelte@5.19.6__acorn@8.14.0_sveltekit-superforms@2.23.1__@sveltejs+kit@2.16.1___@sveltejs+vite-plugin-svelte@5.0.3____svelte@5.19.6_____acorn@8.14.0____vite@6.0.11_____@types+node@20.17.16_____jiti@2.4.2____@types+node@20.17.16___svelte@5.19.6____acorn@8.14.0___vite@5.4.14____@types+node@20.17.16___vite@6.0.11____@types+node@20.17.16____jiti@2.4.2___@types+node@20.17.16__svelte@5.19.6___acorn@8.14.0__valibot@1.0.0-beta.12___typescript@5.6.3__zod@3.24.1__@sveltejs+vite-plugin-svelte@5.0.3___svelte@5.19.6____acorn@8.14.0___vite@6.0.11____@types+node@20.17.16____jiti@2.4.2___@types+node@20.17.16__vite@5.4.14___@types+node@20.17.16__typescript@5.6.3__vite@6.0.11___@types+node@20.17.16___jiti@2.4.2__@types+node@20.17.16_@sveltejs+kit@2.16.1__@sveltejs+vite-plugin-svelte@5.0.3___svelte@5.19.6____acorn@8.14.0___vite@6.0.11____@types+node@20.17.16____jiti@2.4.2___@types+node@20.17.16__svelte@5.19.6___acorn@8.14.0__vite@5.4.14___@types+node@20.17.16__vite@6.0.11___@types+node@20.17.16___jiti@2.4.2__@types+node@20.17.16_valibot@1.0.0-beta.12__typescript@5.6.3_zod@3.24.1_@sveltejs+vite-plugin-svelte@5.0.3__svelte@5.19.6___acorn@8.14.0__vite@6.0.11___@types+node@20.17.16___jiti@2.4.2__@types+node@20.17.16_vite@5.4.14__@types+node@20.17.16_typescript@5.6.3_vite@6.0.11__@types+node@20.17.16__jiti@2.4.2_@types+node@20.17.16", "npm:fs-extra@^11.2.0": "11.3.0", + "npm:fuse.js@^7.1.0": "7.1.0", "npm:get-folder-size@5": "5.0.0", "npm:globals@^15.14.0": "15.14.0", "npm:google-protobuf@^3.21.4": "3.21.4", @@ -164,6 +167,7 @@ "npm:shiki@^1.27.2": "1.29.2", "npm:supabase@^2.2.1": "2.9.6", "npm:svelte-check@^4.1.1": "4.1.4_svelte@5.19.6__acorn@8.14.0_typescript@5.6.3", + "npm:svelte-inspect-value@~0.2.2": "0.2.2_svelte@5.19.6__acorn@8.14.0", "npm:svelte-markdown@~0.4.1": "0.4.1_svelte@4.2.19", "npm:svelte-radix@^2.0.1": "2.0.1_svelte@5.19.6__acorn@8.14.0", "npm:svelte-sonner@~0.3.28": "0.3.28_svelte@5.19.6__acorn@8.14.0", @@ -184,6 +188,7 @@ "npm:tauri-plugin-clipboard-api@^2.1.11": "2.1.11_typescript@5.6.3", "npm:tauri-plugin-shellx-api@2.0.15": "2.0.15", "npm:tauri-plugin-shellx-api@^2.0.14": "2.0.14", + "npm:tauri-plugin-shellx-api@^2.0.15": "2.0.15", "npm:tauri-plugin-system-info-api@2.0.8": "2.0.8_typescript@5.6.3", "npm:ts-proto@^2.3.0": "2.6.1", "npm:tslib@^2.8.1": "2.8.1", @@ -1543,6 +1548,9 @@ "levn" ] }, + "@faker-js/faker@9.5.1": { + "integrity": "sha512-0fzMEDxkExR2cn731kpDaCCnBGBUOIXEi2S1N5l8Hltp6aPf4soTMJ+g4k8r2sI5oB+rpwIW8Uy/6jkwGpnWPg==" + }, "@floating-ui/core@1.6.9": { "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==", "dependencies": [ @@ -2710,7 +2718,7 @@ "clipboardy", "consola@3.4.0", "defu", - "fuse.js", + "fuse.js@7.0.0", "giget", "h3", "httpxy", @@ -5003,16 +5011,26 @@ "tailwindcss" ] }, + "@tanstack/svelte-virtual@3.13.2_svelte@5.19.6__acorn@8.14.0": { + "integrity": "sha512-Rrt5tQiZg9GlrUXV40tq8Prmg7iacoWd0sAc8DCBpBxgH/BHzpWonk7BMyTw03FWmRn9aUB4PO8+HZJmPnmFng==", + "dependencies": [ + "@tanstack/virtual-core@3.13.2", + "svelte@5.19.6_acorn@8.14.0" + ] + }, "@tanstack/table-core@8.20.5": { "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==" }, "@tanstack/virtual-core@3.11.3": { "integrity": "sha512-v2mrNSnMwnPJtcVqNvV0c5roGCBqeogN8jDtgtuHCphdwBasOZ17x8UV8qpHUh+u0MLfX43c0uUHKje0s+Zb0w==" }, + "@tanstack/virtual-core@3.13.2": { + "integrity": "sha512-Qzz4EgzMbO5gKrmqUondCjiHcuu4B1ftHb0pjCut661lXZdGoHeze9f/M8iwsK1t5LGR6aNuNGU7mxkowaW6RQ==" + }, "@tanstack/vue-virtual@3.11.3_vue@3.5.13__typescript@5.6.3_typescript@5.6.3": { "integrity": "sha512-BVZ00i5XBucetRj2doVd32jOPtJthvZSVJvx9GL4gSQsyngliSCtzlP1Op7TFrEtmebRKT8QUQE1tRhOQzWecQ==", "dependencies": [ - "@tanstack/virtual-core", + "@tanstack/virtual-core@3.11.3", "vue" ] }, @@ -9102,6 +9120,9 @@ "fuse.js@7.0.0": { "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==" }, + "fuse.js@7.1.0": { + "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==" + }, "gensync@1.0.0-beta.2": { "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==" }, @@ -9429,6 +9450,9 @@ "he@1.2.0": { "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "highlight.js@11.11.1": { + "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==" + }, "hookable@5.5.3": { "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==" }, @@ -13532,6 +13556,15 @@ "svelte@5.19.6_acorn@8.14.0" ] }, + "svelte-inspect-value@0.2.2_svelte@5.19.6__acorn@8.14.0": { + "integrity": "sha512-Ly4QcIDoPo2O81CdIhx600bBaQdla65VXvXEMA9So947In8773Ey56k6A1WTsZiljAabxZFChBRqOt9nOYczuA==", + "dependencies": [ + "esm-env", + "fast-deep-equal", + "highlight.js", + "svelte@5.19.6_acorn@8.14.0" + ] + }, "svelte-markdown@0.4.1_svelte@4.2.19": { "integrity": "sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==", "dependencies": [ @@ -15186,6 +15219,7 @@ "npm:prettier@^3.4.2", "npm:pretty-bytes@^6.1.1", "npm:semver@^7.6.3", + "npm:svelte-inspect-value@~0.2.2", "npm:svelte-radix@^2.0.1", "npm:svelte-sonner@~0.3.28", "npm:sveltekit-superforms@^2.22.1", @@ -15278,6 +15312,7 @@ "packages/extensions/demo-worker-template-ext": { "packageJson": { "dependencies": [ + "npm:@faker-js/faker@^9.5.1", "npm:@jsr/kunkun__api@^0.0.13", "npm:@rollup/plugin-commonjs@^26.0.1", "npm:@rollup/plugin-node-resolve@^15.2.3", @@ -15549,6 +15584,7 @@ "npm:@kksh/svelte5@~0.1.15", "npm:@shikijs/langs@^2.3.2", "npm:@shikijs/themes@^2.3.2", + "npm:@tanstack/svelte-virtual@^3.13.2", "npm:@types/bun@latest", "npm:@typescript-eslint/eslint-plugin@^8.20.0", "npm:@typescript-eslint/parser@^8.20.0", @@ -15559,6 +15595,7 @@ "npm:eslint-plugin-svelte@^2.46.1", "npm:eslint@^9.21.0", "npm:formsnap@2.0.0-next.1", + "npm:fuse.js@^7.1.0", "npm:globals@^15.14.0", "npm:gsap@^3.12.7", "npm:lucide-svelte@0.471", @@ -15568,6 +15605,7 @@ "npm:pretty-bytes@^6.1.1", "npm:shiki-magic-move@~0.5.2", "npm:shiki@^1.27.2", + "npm:svelte-inspect-value@~0.2.2", "npm:svelte-markdown@~0.4.1", "npm:svelte-radix@^2.0.1", "npm:svelte-sonner@~0.3.28", diff --git a/packages/extensions/demo-worker-template-ext/package.json b/packages/extensions/demo-worker-template-ext/package.json index f403d96..99aefcc 100644 --- a/packages/extensions/demo-worker-template-ext/package.json +++ b/packages/extensions/demo-worker-template-ext/package.json @@ -113,6 +113,7 @@ "build": "bun build.ts" }, "dependencies": { + "@faker-js/faker": "^9.5.1", "@kksh/api": "workspace:*", "@kunkun/api": "npm:@jsr/kunkun__api@^0.0.13" }, diff --git a/packages/extensions/demo-worker-template-ext/src/index.ts b/packages/extensions/demo-worker-template-ext/src/index.ts index 9f910f8..2d44875 100644 --- a/packages/extensions/demo-worker-template-ext/src/index.ts +++ b/packages/extensions/demo-worker-template-ext/src/index.ts @@ -1,3 +1,4 @@ +import { faker } from "@faker-js/faker" import { Action, app, @@ -23,6 +24,40 @@ import { } from "@kksh/api/ui/template" import { IconType } from "@kunkun/api/models" +function generateId() { + return Math.random().toString(36).substring(2, 15) +} + +type Item = { + id: string + name: string + description: string +} + +type Section = { + name: string + items: Item[] + sectionRef: HTMLDivElement | null + sectionHeight: number +} + +function getItems(n: number = 10): Item[] { + return Array.from({ length: n }, () => ({ + id: generateId(), + name: faker.person.fullName(), + description: faker.lorem.sentence() + })) +} + +function getSections(n: number = 10): Section[] { + return Array.from({ length: n }, () => ({ + name: faker.lorem.word(), + items: getItems(3), + sectionRef: null, + sectionHeight: 0 + })) +} + const nums = Array.from({ length: 20 }, (_, i) => i + 1) const categories = ["Suggestion", "Advice", "Idea"] const itemsTitle = nums.map((n) => categories.map((c) => `${c} ${n}`)).flat() @@ -52,6 +87,36 @@ class ExtensionTemplate extends TemplateUiCommand { async load() { ui.setSearchBarPlaceholder("Search for items") + const sections = getSections(2) + const items = getItems(5) + return ui.render( + new List.List({ + items: items.map( + (item) => + new List.Item({ + title: item.name, + value: item.id + // icon: new Icon({ + // type: IconType.enum.Iconify, + // value: "mingcute:appstore-fill" + // }) + }) + ), + sections: sections.map( + (section) => + new List.Section({ + title: section.name, + items: section.items.map( + (item) => + new List.Item({ + title: item.name, + value: item.id + }) + ) + }) + ) + }) + ) ui.showLoadingBar(true) setTimeout(() => { ui.showLoadingBar(false) diff --git a/packages/ui/package.json b/packages/ui/package.json index bcaabbb..dc3e765 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -74,11 +74,14 @@ "@shikijs/langs": "^2.3.2", "@shikijs/themes": "^2.3.2", "@std/semver": "npm:@jsr/std__semver@^1.0.3", + "@tanstack/svelte-virtual": "^3.13.2", "dompurify": "^3.2.3", + "fuse.js": "^7.1.0", "gsap": "^3.12.7", "moment": "^2.30.1", "pretty-bytes": "^6.1.1", "shiki-magic-move": "^0.5.2", + "svelte-inspect-value": "^0.2.2", "svelte-markdown": "^0.4.1", "valibot": "1.0.0-beta.12" } diff --git a/packages/ui/src/components/extension/templates/list-item.svelte b/packages/ui/src/components/extension/templates/list-item.svelte index 5ea6700..94248e2 100644 --- a/packages/ui/src/components/extension/templates/list-item.svelte +++ b/packages/ui/src/components/extension/templates/list-item.svelte @@ -3,10 +3,27 @@ import { Command } from "@kksh/svelte5" import { IconMultiplexer } from "../../common" - const { item, onSelect }: { item: ListSchema.Item; onSelect?: () => void } = $props() + const { + item, + class: className, + onSelect, + translateY, + height + }: { + item: ListSchema.Item + onSelect?: () => void + translateY?: number + height?: number + class?: string + } = $props() - + {#if item.icon} {/if} diff --git a/packages/ui/src/components/extension/templates/list-view.svelte b/packages/ui/src/components/extension/templates/list-view.svelte index 2cb5078..88b4f12 100644 --- a/packages/ui/src/components/extension/templates/list-view.svelte +++ b/packages/ui/src/components/extension/templates/list-view.svelte @@ -3,13 +3,18 @@ import { Button, Command, Progress, Resizable } from "@kksh/svelte5" import { CustomCommandInput } from "@kksh/ui/main" import { commandScore } from "@kksh/ui/utils" + import { createVirtualizer, type VirtualItem } from "@tanstack/svelte-virtual" + import Fuse from "fuse.js" import { ArrowLeftIcon } from "lucide-svelte" import { type PaneAPI } from "paneforge" - import { onMount, type Snippet } from "svelte" + import { onMount, setContext, type Snippet } from "svelte" + import { Inspect } from "svelte-inspect-value" import { StrikeSeparator } from "../../common" import { DraggableCommandGroup } from "../../custom" import ListDetail from "./list-detail.svelte" import ListItem from "./list-item.svelte" + import { type Section } from "./types" + import VirtualCommandGroup from "./virtual-command-group.svelte" let { searchTerm = $bindable(""), @@ -87,24 +92,79 @@ rightPane?.resize(detailWidth) } }) + + /* -------------------------------------------------------------------------- */ + /* Virtual List and Fuse Search */ + /* -------------------------------------------------------------------------- */ + const itemHeight = 30 + setContext("itemHeight", itemHeight) + let sectionItems = $derived( + listViewContent.sections?.flatMap((section) => section.items) ?? [] + ) + /** + * When search term is not empty, we hide sections/groups and move sections items all into items array + */ + let srcItems = $derived( + searchTerm.length > 0 + ? [...sectionItems, ...(listViewContent.items ?? [])] + : (listViewContent.items ?? []) + ) + let srcSections = $state([]) + $effect(() => { + //! srcSections cannot be derived, because its values are binded to Virtual Group, and must be a state + srcSections = + searchTerm.length === 0 + ? (listViewContent.sections?.map((section) => ({ + ...section, + sectionHeight: 0, + sectionRef: null + })) ?? []) + : [] + }) + let virtualListEl: HTMLDivElement | null = $state(null) + const itemsFuse = new Fuse([], { + includeScore: true, + threshold: 0.2, + keys: ["title", "subTitle", "keywords"] + }) + let resultingItems = $derived( + // when search term changes, update the resulting items + searchTerm.length > 0 ? itemsFuse.search(searchTerm).map((item) => item.item) : srcItems + ) + // section total height is auto derived from section refs + let sectionTotalHeight = $derived(srcSections.reduce((acc, s) => acc + (s.sectionHeight ?? 0), 0)) + // this should be a list of numbers, the first item is 0, the second item equal to first sectionRef.clientHeight, and so on + let sectionsCummulativeHeight = $derived( + srcSections.map((s, i) => + srcSections.slice(0, i).reduce((acc, s) => acc + (s.sectionHeight ?? 0), 0) + ) + ) + let virtualizer = createVirtualizer({ + count: 0, + getScrollElement: () => virtualListEl, + estimateSize: () => itemHeight, + overscan: 5 + }) + let virtualItems: VirtualItem[] = $state([]) + let itemsTotalSize = $state(0) + + $effect(() => { + itemsFuse.setCollection(srcItems) + }) + $effect(() => { + void resultingItems + $virtualizer.setOptions({ count: resultingItems.length, scrollMargin: sectionTotalHeight }) + virtualItems = $virtualizer.getVirtualItems() + itemsTotalSize = $virtualizer.getTotalSize() + }) { - if (!value.startsWith("{")) { - return -1 - } - const item = JSON.parse(value) as ListSchema.Item - return ( - commandScore(item.title, search, keywords) + - (item.subTitle ? commandScore(item.subTitle, search, keywords) : 0) - ) - }} + shouldFilter={false} > - + No results found. - {#each listViewContent.sections || [] as section} - - {#each section.items as item} - onListItemSelected?.(item.value)} /> - {/each} - - {/each} - {#each listViewContent.items || [] as item} - onListItemSelected?.(item.value)} /> - {/each} +
+ {#each srcSections as section, i} + + {/each} + {#each virtualItems as row (row.index)} + {@const item = resultingItems[row.index]} + {#if item} + onListItemSelected?.(item.value)} + /> + {:else} + + No Data + + {/if} + {/each} +
{#if loading} Loading diff --git a/packages/ui/src/components/extension/templates/types.ts b/packages/ui/src/components/extension/templates/types.ts new file mode 100644 index 0000000..166b37b --- /dev/null +++ b/packages/ui/src/components/extension/templates/types.ts @@ -0,0 +1,6 @@ +import type { ListSchema } from "@kksh/api/models" + +export type Section = ListSchema.Section & { + sectionHeight: number + sectionRef: HTMLDivElement | null +} diff --git a/packages/ui/src/components/extension/templates/virtual-command-group.svelte b/packages/ui/src/components/extension/templates/virtual-command-group.svelte new file mode 100644 index 0000000..89cbc5a --- /dev/null +++ b/packages/ui/src/components/extension/templates/virtual-command-group.svelte @@ -0,0 +1,84 @@ + + + + {#each virtualItems as row (row.index)} + {@const item = resultingItems[row.index]} + {#if item} + onListItemSelected?.(item.value)} + /> + {/if} + {/each} + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1e54018..407fa58 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -144,7 +144,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 '@types/debug': specifier: ^4.1.12 version: 4.1.12 @@ -184,7 +184,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 '@types/fs-extra': specifier: ^11.0.4 version: 11.0.4 @@ -323,7 +323,7 @@ importers: version: 2.2.7 '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 '@types/semver': specifier: ^7.5.8 version: 7.5.8 @@ -335,7 +335,7 @@ importers: version: 8.23.0(eslint@9.21.0(jiti@2.4.0))(typescript@5.6.3) autoprefixer: specifier: ^10.4.20 - version: 10.4.20(postcss@8.4.49) + version: 10.4.20(postcss@8.5.1) bits-ui: specifier: 1.0.0-next.86 version: 1.0.0-next.86(svelte@5.16.6) @@ -474,7 +474,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 '@types/lodash': specifier: ^4.17.14 version: 4.17.14 @@ -514,7 +514,7 @@ importers: version: link:../typescript-config '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 packages/config-eslint: dependencies: @@ -557,10 +557,13 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 packages/extensions/demo-worker-template-ext: dependencies: + '@faker-js/faker': + specifier: ^9.5.1 + version: 9.5.1 '@kksh/api': specifier: workspace:* version: link:../../api @@ -582,7 +585,7 @@ importers: version: 11.1.6(rollup@4.34.2)(tslib@2.8.1)(typescript@5.7.3) '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 rollup-plugin-visualizer: specifier: ^5.12.0 version: 5.12.0(rollup@4.34.2) @@ -689,7 +692,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 packages/grpc: dependencies: @@ -708,7 +711,7 @@ importers: version: 0.7.13 '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 '@types/google-protobuf': specifier: ^3.15.12 version: 3.15.12 @@ -736,7 +739,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 verify-package-export: specifier: ^0.0.3 version: 0.0.3(typescript@5.7.3) @@ -764,7 +767,7 @@ importers: version: 2.48.0 '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 '@valibot/to-json-schema': specifier: 1.0.0-beta.4 version: 1.0.0-beta.4(valibot@1.0.0-beta.10(typescript@5.7.3)) @@ -786,7 +789,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 packages/tauri-plugins/jarvis: dependencies: @@ -805,7 +808,7 @@ importers: version: 2.48.0 '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 packages/templates/template-ext-headless: dependencies: @@ -824,7 +827,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 packages/templates/template-ext-next: dependencies: @@ -1176,7 +1179,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 packages/types: dependencies: @@ -1186,7 +1189,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 packages/typescript-config: {} @@ -1213,9 +1216,15 @@ importers: '@std/semver': specifier: npm:@jsr/std__semver@^1.0.3 version: '@jsr/std__semver@1.0.3' + '@tanstack/svelte-virtual': + specifier: ^3.13.2 + version: 3.13.2(svelte@5.16.6) dompurify: specifier: ^3.2.3 version: 3.2.3 + fuse.js: + specifier: ^7.1.0 + version: 7.1.0 gsap: specifier: ^3.12.7 version: 3.12.7 @@ -1231,6 +1240,9 @@ importers: svelte: specifier: ^5.0.0 version: 5.16.6 + svelte-inspect-value: + specifier: ^0.2.2 + version: 0.2.2(svelte@5.16.6) svelte-markdown: specifier: ^0.4.1 version: 0.4.1(svelte@5.16.6) @@ -1252,7 +1264,7 @@ importers: version: 0.1.15(lucide-svelte@0.471.0(svelte@5.16.6))(svelte-sonner@0.3.28(svelte@5.16.6))(svelte@5.16.6)(sveltekit-superforms@2.22.1(@sveltejs/kit@2.17.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.6)(vite@6.0.7(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)))(svelte@5.16.6)(vite@6.0.7(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)))(@types/json-schema@7.0.15)(svelte@5.16.6)(typescript@5.7.3))(typescript@5.7.3) '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 '@typescript-eslint/eslint-plugin': specifier: ^8.20.0 version: 8.20.0(@typescript-eslint/parser@8.20.0(eslint@9.21.0(jiti@2.4.0))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.0))(typescript@5.7.3) @@ -1334,7 +1346,7 @@ importers: devDependencies: '@types/bun': specifier: latest - version: 1.2.3 + version: 1.2.4 vendors/tauri-plugin-keyring: dependencies: @@ -2404,6 +2416,10 @@ packages: '@exodus/schemasafe@1.3.0': resolution: {integrity: sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==} + '@faker-js/faker@9.5.1': + resolution: {integrity: sha512-0fzMEDxkExR2cn731kpDaCCnBGBUOIXEi2S1N5l8Hltp6aPf4soTMJ+g4k8r2sI5oB+rpwIW8Uy/6jkwGpnWPg==} + engines: {node: '>=18.0.0', npm: '>=9.0.0'} + '@floating-ui/core@1.6.8': resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} @@ -4897,6 +4913,11 @@ packages: peerDependencies: tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1' + '@tanstack/svelte-virtual@3.13.2': + resolution: {integrity: sha512-Rrt5tQiZg9GlrUXV40tq8Prmg7iacoWd0sAc8DCBpBxgH/BHzpWonk7BMyTw03FWmRn9aUB4PO8+HZJmPnmFng==} + peerDependencies: + svelte: ^3.48.0 || ^4.0.0 || ^5.0.0 + '@tanstack/table-core@8.20.5': resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==} engines: {node: '>=12'} @@ -4904,6 +4925,9 @@ packages: '@tanstack/virtual-core@3.10.9': resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==} + '@tanstack/virtual-core@3.13.2': + resolution: {integrity: sha512-Qzz4EgzMbO5gKrmqUondCjiHcuu4B1ftHb0pjCut661lXZdGoHeze9f/M8iwsK1t5LGR6aNuNGU7mxkowaW6RQ==} + '@tanstack/vue-virtual@3.10.9': resolution: {integrity: sha512-KU2quiwJQpA0sdflpXw24bhW+x8PG+FlrSJK3Ilobim671HNn4ztLVWUCEz3Inei4dLYq+GW1MK9X6i6ZeirkQ==} peerDependencies: @@ -5170,8 +5194,8 @@ packages: '@types/btoa-lite@1.0.2': resolution: {integrity: sha512-ZYbcE2x7yrvNFJiU7xJGrpF/ihpkM7zKgw8bha3LNJSesvTtUNxbpzaT7WXBIryf6jovisrxTBvymxMeLLj1Mg==} - '@types/bun@1.2.3': - resolution: {integrity: sha512-054h79ipETRfjtsCW9qJK8Ipof67Pw9bodFWmkfkaUaRiIQ1dIV2VTlheshlBx3mpKr0KeK8VqnMMCtgN9rQtw==} + '@types/bun@1.2.4': + resolution: {integrity: sha512-QtuV5OMR8/rdKJs213iwXDpfVvnskPXY/S0ZiFbsTjQZycuqPbMW8Gf/XhLfwE5njW8sxI2WjISURXPlHypMFA==} '@types/cookie@0.6.0': resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} @@ -6220,8 +6244,8 @@ packages: buffer@6.0.3: resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==} - bun-types@1.2.3: - resolution: {integrity: sha512-P7AeyTseLKAvgaZqQrvp3RqFM3yN9PlcLuSTe7SoJOfZkER73mLdT2vEQi8U64S1YvM/ldcNiQjn0Sn7H9lGgg==} + bun-types@1.2.4: + resolution: {integrity: sha512-nDPymR207ZZEoWD4AavvEaa/KZe/qlrbMSchqpQwovPZCKc7pwMoENjEtHgMKaAjJhy+x6vfqSBA1QU3bJgs0Q==} bundle-name@4.1.0: resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==} @@ -13223,6 +13247,8 @@ snapshots: '@exodus/schemasafe@1.3.0': optional: true + '@faker-js/faker@9.5.1': {} + '@floating-ui/core@1.6.8': dependencies: '@floating-ui/utils': 0.2.8 @@ -16491,10 +16517,17 @@ snapshots: postcss-selector-parser: 6.0.10 tailwindcss: 3.4.17 + '@tanstack/svelte-virtual@3.13.2(svelte@5.16.6)': + dependencies: + '@tanstack/virtual-core': 3.13.2 + svelte: 5.16.6 + '@tanstack/table-core@8.20.5': {} '@tanstack/virtual-core@3.10.9': {} + '@tanstack/virtual-core@3.13.2': {} + '@tanstack/vue-virtual@3.10.9(vue@3.5.13(typescript@5.6.3))': dependencies: '@tanstack/virtual-core': 3.10.9 @@ -16742,9 +16775,9 @@ snapshots: '@types/btoa-lite@1.0.2': {} - '@types/bun@1.2.3': + '@types/bun@1.2.4': dependencies: - bun-types: 1.2.3 + bun-types: 1.2.4 '@types/cookie@0.6.0': {} @@ -18156,6 +18189,16 @@ snapshots: postcss: 8.4.49 postcss-value-parser: 4.2.0 + autoprefixer@10.4.20(postcss@8.5.1): + dependencies: + browserslist: 4.24.2 + caniuse-lite: 1.0.30001676 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.1.1 + postcss: 8.5.1 + postcss-value-parser: 4.2.0 + available-typed-arrays@1.0.7: dependencies: possible-typed-array-names: 1.0.0 @@ -18291,7 +18334,7 @@ snapshots: base64-js: 1.5.1 ieee754: 1.2.1 - bun-types@1.2.3: + bun-types@1.2.4: dependencies: '@types/node': 22.13.1 '@types/ws': 8.5.14 @@ -22851,7 +22894,7 @@ snapshots: runed@0.23.2(svelte@5.16.6): dependencies: - esm-env: 1.2.1 + esm-env: 1.2.2 svelte: 5.16.6 rw@1.3.3: {}