From 4a05c5a4753e31afeddf14ec6c05f9e988ab54d8 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Fri, 8 Nov 2024 15:12:20 -0500
Subject: [PATCH] [Feature] Implement UI template worker command (#20)

* feat: add ui worker command loading code (not working yet)

* feat: add unocss

* feat: add-dev-extension page

* feat: implemented list view template

* feat: implement list view detail view width, add demo extension for dev

* fix: resize listview, add metadata component

* fix: metadata tag component  background color

* feat: implement boolean (checkbox), date fields for form template

* feat: support default, optional, placeholder for form fields

* feat: implemented form view Select Field

* feat: markdown view

* feat: fixed a markdown schema type error

* fix: markdown styling

* feat: implement action panel for UI worker template list view

* format: format all

* chore: bump desktop version

* fix: fix search term bind in list view
---
 .gitattributes                                |    2 +
 apps/desktop/app.d.ts                         |    8 +
 apps/desktop/package.json                     |    5 +-
 apps/desktop/src-tauri/src/utils/server.rs    |   33 -
 apps/desktop/src/lib/cmds/builtin.ts          |   19 +-
 apps/desktop/src/lib/cmds/ext.ts              |   27 +-
 .../lib/components/common/DragNDrop.svelte    |   38 +
 .../standalone/settings/AddDevExtForm.svelte  |  149 ++
 .../install-npm-package-name-form.svelte      |   61 +
 .../settings/install-tarball-url-form.svelte  |   62 +
 apps/desktop/src/lib/stores/appState.ts       |   29 +-
 apps/desktop/src/lib/stores/extensions.ts     |   30 +
 apps/desktop/src/lib/stores/quick-links.ts    |    2 -
 apps/desktop/src/routes/+layout.svelte        |    6 +
 apps/desktop/src/routes/+page.svelte          |    7 +-
 .../extension/create-quick-link/+page.svelte  |   12 +-
 .../routes/extension/ui-worker/+page.svelte   |  290 +++-
 .../src/routes/extension/ui-worker/+page.ts   |   76 ++
 .../settings/add-dev-extension/+page.svelte   |   31 +
 .../settings/set-dev-ext-path/+page.svelte    |    2 +-
 apps/desktop/tailwind.config.ts               |    3 +-
 apps/desktop/uno.config.ts                    |    5 +
 apps/desktop/vite.config.js                   |    3 +-
 packages/api/jsr.json                         |    2 +-
 packages/api/package.json                     |    2 +-
 packages/api/src/constants.ts                 |    2 +-
 packages/api/src/dev/index.ts                 |    2 +-
 packages/api/src/ui/client.ts                 |    3 +-
 .../api/src/ui/worker/components/form-view.ts |    3 +
 packages/api/src/ui/worker/schema/form.ts     |   27 +-
 packages/api/src/version.ts                   |    2 +-
 packages/extension/src/install.ts             |    5 +
 .../demo-worker-template-ext/.gitignore       |  176 +++
 .../demo-worker-template-ext/CHANGELOG.md     |    8 +
 .../demo-worker-template-ext/README.md        |   15 +
 .../demo-worker-template-ext/buffer.ts        |    3 +
 .../demo-worker-template-ext/build.ts         |   31 +
 .../deno-src/deno.json                        |    5 +
 .../deno-src/deno.lock                        |   23 +
 .../demo-worker-template-ext/deno-src/rpc.ts  |   13 +
 .../demo-worker-template-ext/package.json     |  114 ++
 .../demo-worker-template-ext/rollup.config.js |   20 +
 .../demo-worker-template-ext/src/index.ts     |  181 +++
 .../demo-worker-template-ext/tsconfig.json    |   27 +
 packages/extensions/form-view/.gitignore      |  177 +++
 packages/extensions/form-view/README.md       |  125 ++
 packages/extensions/form-view/build.ts        |   30 +
 packages/extensions/form-view/package.json    |   47 +
 packages/extensions/form-view/src/i18n/en.ts  |    5 +
 .../extensions/form-view/src/i18n/index.ts    |   20 +
 packages/extensions/form-view/src/i18n/zh.ts  |    5 +
 packages/extensions/form-view/src/index.ts    |   95 ++
 packages/extensions/form-view/tsconfig.json   |   27 +
 packages/types/src/appState.ts                |    5 +
 packages/ui/package.json                      |    6 +-
 .../common/IconSelectorDialog.svelte          |    2 -
 packages/ui/src/components/common/Kbd.svelte  |   15 +
 .../src/components/common/LoadingBar.svelte   |   46 +
 .../components/common/StrikeSeparator.svelte  |   22 +
 .../ui/src/components/common/TauriLink.svelte |   30 +
 .../components/common/date/DatePicker.svelte  |   37 +
 .../common/date/DatePickerWithPreset.svelte   |   65 +
 .../ui/src/components/common/date/index.ts    |    2 +
 packages/ui/src/components/common/index.ts    |    3 +
 packages/ui/src/components/extension/index.ts |    1 +
 .../extension/templates/Markdown.svelte       |   10 +
 .../extension/templates/MarkdownView.svelte   |   28 +
 .../extension/templates/form-view.svelte      |   19 +
 .../extension/templates/form.svelte           |  136 ++
 .../components/extension/templates/index.ts   |    3 +
 .../extension/templates/list-detail.svelte    |   19 +
 .../extension/templates/list-item.svelte      |   27 +
 .../extension/templates/list-view.svelte      |  156 +++
 .../templates/metadata/Metadata.svelte        |   43 +
 .../extension/templates/metadata/label.svelte |   32 +
 .../extension/templates/metadata/link.svelte  |   22 +
 .../extension/templates/metadata/tag.svelte   |   19 +
 .../extension/templates/metadata/tags.svelte  |   21 +
 .../ui/src/components/main/ActionPanel.svelte |   69 +
 .../src/components/main/ExtCmdsGroup.svelte   |    3 +-
 .../main/GlobalCommandPaletteFooter.svelte    |   38 +-
 packages/ui/src/index.ts                      |    1 +
 .../ui/src}/utils/command-score.ts            |    0
 packages/ui/src/utils/form.ts                 |   47 +
 packages/ui/src/utils/index.ts                |    2 +
 packages/ui/tsconfig.json                     |    3 +
 pnpm-lock.yaml                                | 1195 +++++++++++++++++
 87 files changed, 4111 insertions(+), 111 deletions(-)
 create mode 100644 .gitattributes
 create mode 100644 apps/desktop/app.d.ts
 create mode 100644 apps/desktop/src/lib/components/common/DragNDrop.svelte
 create mode 100644 apps/desktop/src/lib/components/standalone/settings/AddDevExtForm.svelte
 create mode 100644 apps/desktop/src/lib/components/standalone/settings/install-npm-package-name-form.svelte
 create mode 100644 apps/desktop/src/lib/components/standalone/settings/install-tarball-url-form.svelte
 create mode 100644 apps/desktop/src/routes/extension/ui-worker/+page.ts
 create mode 100644 apps/desktop/src/routes/settings/add-dev-extension/+page.svelte
 create mode 100644 apps/desktop/uno.config.ts
 create mode 100644 packages/extensions/demo-worker-template-ext/.gitignore
 create mode 100644 packages/extensions/demo-worker-template-ext/CHANGELOG.md
 create mode 100644 packages/extensions/demo-worker-template-ext/README.md
 create mode 100644 packages/extensions/demo-worker-template-ext/buffer.ts
 create mode 100644 packages/extensions/demo-worker-template-ext/build.ts
 create mode 100644 packages/extensions/demo-worker-template-ext/deno-src/deno.json
 create mode 100644 packages/extensions/demo-worker-template-ext/deno-src/deno.lock
 create mode 100644 packages/extensions/demo-worker-template-ext/deno-src/rpc.ts
 create mode 100644 packages/extensions/demo-worker-template-ext/package.json
 create mode 100644 packages/extensions/demo-worker-template-ext/rollup.config.js
 create mode 100644 packages/extensions/demo-worker-template-ext/src/index.ts
 create mode 100644 packages/extensions/demo-worker-template-ext/tsconfig.json
 create mode 100644 packages/extensions/form-view/.gitignore
 create mode 100644 packages/extensions/form-view/README.md
 create mode 100644 packages/extensions/form-view/build.ts
 create mode 100644 packages/extensions/form-view/package.json
 create mode 100644 packages/extensions/form-view/src/i18n/en.ts
 create mode 100644 packages/extensions/form-view/src/i18n/index.ts
 create mode 100644 packages/extensions/form-view/src/i18n/zh.ts
 create mode 100644 packages/extensions/form-view/src/index.ts
 create mode 100644 packages/extensions/form-view/tsconfig.json
 create mode 100644 packages/ui/src/components/common/Kbd.svelte
 create mode 100644 packages/ui/src/components/common/LoadingBar.svelte
 create mode 100644 packages/ui/src/components/common/StrikeSeparator.svelte
 create mode 100644 packages/ui/src/components/common/TauriLink.svelte
 create mode 100644 packages/ui/src/components/common/date/DatePicker.svelte
 create mode 100644 packages/ui/src/components/common/date/DatePickerWithPreset.svelte
 create mode 100644 packages/ui/src/components/common/date/index.ts
 create mode 100644 packages/ui/src/components/extension/templates/Markdown.svelte
 create mode 100644 packages/ui/src/components/extension/templates/MarkdownView.svelte
 create mode 100644 packages/ui/src/components/extension/templates/form-view.svelte
 create mode 100644 packages/ui/src/components/extension/templates/form.svelte
 create mode 100644 packages/ui/src/components/extension/templates/index.ts
 create mode 100644 packages/ui/src/components/extension/templates/list-detail.svelte
 create mode 100644 packages/ui/src/components/extension/templates/list-item.svelte
 create mode 100644 packages/ui/src/components/extension/templates/list-view.svelte
 create mode 100644 packages/ui/src/components/extension/templates/metadata/Metadata.svelte
 create mode 100644 packages/ui/src/components/extension/templates/metadata/label.svelte
 create mode 100644 packages/ui/src/components/extension/templates/metadata/link.svelte
 create mode 100644 packages/ui/src/components/extension/templates/metadata/tag.svelte
 create mode 100644 packages/ui/src/components/extension/templates/metadata/tags.svelte
 create mode 100644 packages/ui/src/components/main/ActionPanel.svelte
 rename {apps/desktop/src/lib => packages/ui/src}/utils/command-score.ts (100%)
 create mode 100644 packages/ui/src/utils/form.ts

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..423830b
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+pnpm-lock.yaml linguist-generated=true
+packages/tauri-plugins/jarvis/permissions/autogenerated linguist-generated=true
diff --git a/apps/desktop/app.d.ts b/apps/desktop/app.d.ts
new file mode 100644
index 0000000..9959563
--- /dev/null
+++ b/apps/desktop/app.d.ts
@@ -0,0 +1,8 @@
+import type { AttributifyAttributes } from "@unocss/preset-attributify"
+
+declare module "svelte/elements" {
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars
+	interface HTMLAttributes<T> extends AttributifyAttributes {}
+}
+
+export {}
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index dd4b409..b909e8b 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@kksh/desktop",
-	"version": "0.1.9-beta.8",
+	"version": "0.1.10",
 	"description": "",
 	"type": "module",
 	"scripts": {
@@ -15,6 +15,7 @@
 	"license": "MIT",
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.2",
+		"@huakunshen/comlink": "^4.4.1",
 		"@kksh/extension": "workspace:*",
 		"@kksh/supabase": "workspace:*",
 		"@kksh/ui": "workspace:*",
@@ -45,6 +46,7 @@
 		"@tauri-apps/cli": "^2.0.4",
 		"@types/bun": "latest",
 		"@types/semver": "^7.5.8",
+		"@unocss/preset-attributify": "^0.64.0",
 		"autoprefixer": "^10.4.20",
 		"clsx": "^2.1.1",
 		"embla-carousel-svelte": "^8.3.1",
@@ -55,6 +57,7 @@
 		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
+		"unocss": "^0.64.0",
 		"vaul-svelte": "^0.3.2",
 		"vite": "^5.4.10"
 	}
diff --git a/apps/desktop/src-tauri/src/utils/server.rs b/apps/desktop/src-tauri/src/utils/server.rs
index 53b161c..c6377f0 100644
--- a/apps/desktop/src-tauri/src/utils/server.rs
+++ b/apps/desktop/src-tauri/src/utils/server.rs
@@ -8,47 +8,14 @@ pub fn tauri_file_server(
     extension_folder_path: PathBuf,
     dist: Option<String>,
 ) -> tauri::http::Response<Vec<u8>> {
-    // let host = request.uri().host().unwrap();
-    // let host_parts: Vec<&str> = host.split(".").collect();
-    // if host_parts.len() != 3 {
-    //     return tauri::http::Response::builder()
-    //         .status(tauri::http::StatusCode::NOT_FOUND)
-    //         .header("Access-Control-Allow-Origin", "*")
-    //         .body("Invalid Host".as_bytes().to_vec())
-    //         .unwrap();
-    // }
-    // expect 3 parts, ext_identifier, dist and ext_type
-    // let ext_identifier = host_parts[0];
-    // let dist = host_parts[1];
-    // let ext_type = host_parts[2]; // ext or dev-ext
-    // let app_state = app.state::<tauri_plugin_jarvis::model::app_state::AppState>();
-    // let app_state: tauri:State<tauri_plugin_jarvis::model::app_state::AppState> = app.state();
-    // let extension_folder_path: Option<PathBuf> = match ext_type {
-    //     "ext" => Some(app_state.extension_path.lock().unwrap().clone()),
-    //     "dev-ext" => app_state.dev_extension_path.lock().unwrap().clone(),
-    //     _ => None,
-    // };
-    // let extension_folder_path = match extension_folder_path {
-    //     Some(path) => path,
-    //     None => {
-    //         return tauri::http::Response::builder()
-    //             .status(tauri::http::StatusCode::NOT_FOUND)
-    //             .header("Access-Control-Allow-Origin", "*")
-    //             .body("Extension Folder Not Found".as_bytes().to_vec())
-    //             .unwrap()
-    //     }
-    // };
-    println!("dist: {:?}", dist);
     let path = &request.uri().path()[1..]; // skip the first /
     let path = urlencoding::decode(path).unwrap().to_string();
     let mut url_file_path = extension_folder_path;
-    // .join(ext_identifier)
     match dist {
         Some(dist) => url_file_path = url_file_path.join(dist),
         None => {}
     }
     url_file_path = url_file_path.join(path);
-    println!("url_file_path: {:?}", url_file_path);
     // check if it's file or directory, if file and exist, return file, if directory, return index.html, if neither, check .html
     if url_file_path.is_file() {
         // println!("1st case url_file_path: {:?}", url_file_path);
diff --git a/apps/desktop/src/lib/cmds/builtin.ts b/apps/desktop/src/lib/cmds/builtin.ts
index ddea6bf..f6b3a01 100644
--- a/apps/desktop/src/lib/cmds/builtin.ts
+++ b/apps/desktop/src/lib/cmds/builtin.ts
@@ -54,16 +54,15 @@ export const builtinCmds: BuiltinCmd[] = [
 			}, 2_000)
 		}
 	},
-	// {
-	// 	name: "Add Dev Extension",
-	// 	iconifyIcon: "lineicons:dev",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/add-dev-ext")
-	// 	}
-	// },
+	{
+		name: "Add Dev Extension",
+		iconifyIcon: "lineicons:dev",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/settings/add-dev-extension")
+		}
+	},
 	{
 		name: "Kunkun Version",
 		iconifyIcon: "stash:version-solid",
diff --git a/apps/desktop/src/lib/cmds/ext.ts b/apps/desktop/src/lib/cmds/ext.ts
index f8ad67f..1aede5c 100644
--- a/apps/desktop/src/lib/cmds/ext.ts
+++ b/apps/desktop/src/lib/cmds/ext.ts
@@ -2,14 +2,11 @@ import { appState } from "@/stores"
 import { winExtMap } from "@/stores/winExtMap"
 import { trimSlash } from "@/utils/url"
 import { constructExtensionSupportDir } from "@kksh/api"
-import { CmdTypeEnum, CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
+import { CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
 import { launchNewExtWindow } from "@kksh/extension"
 import { convertFileSrc } from "@tauri-apps/api/core"
-import { WebviewWindow } from "@tauri-apps/api/webviewWindow"
 import * as fs from "@tauri-apps/plugin-fs"
-import { debug } from "@tauri-apps/plugin-log"
 import { goto } from "$app/navigation"
-import * as v from "valibot"
 
 export async function createExtSupportDir(extPath: string) {
 	const extSupportDir = await constructExtensionSupportDir(extPath)
@@ -24,7 +21,19 @@ export async function onTemplateUiCmdSelect(
 	{ isDev, hmr }: { isDev: boolean; hmr: boolean }
 ) {
 	await createExtSupportDir(ext.extPath)
-	console.log("onTemplateUiCmdSelect", ext, cmd, isDev, hmr)
+	// console.log("onTemplateUiCmdSelect", ext, cmd, isDev, hmr)
+	const url = `/extension/ui-worker?extPath=${encodeURIComponent(ext.extPath)}&cmdName=${encodeURIComponent(cmd.name)}`
+	if (cmd.window) {
+		const winLabel = await winExtMap.registerExtensionWithWindow({ extPath: ext.extPath })
+		const window = launchNewExtWindow(winLabel, url, cmd.window)
+		window.onCloseRequested(async (event) => {
+			await winExtMap.unregisterExtensionFromWindow(winLabel)
+		})
+	} else {
+		return winExtMap
+			.registerExtensionWithWindow({ windowLabel: "main", extPath: ext.extPath })
+			.then(() => goto(url))
+	}
 }
 
 export async function onCustomUiCmdSelect(
@@ -32,7 +41,7 @@ export async function onCustomUiCmdSelect(
 	cmd: CustomUiCmd,
 	{ isDev, hmr }: { isDev: boolean; hmr: boolean }
 ) {
-	console.log("onCustomUiCmdSelect", ext, cmd, isDev, hmr)
+	// console.log("onCustomUiCmdSelect", ext, cmd, isDev, hmr)
 	await createExtSupportDir(ext.extPath)
 	let url = cmd.main
 
@@ -55,11 +64,7 @@ export async function onCustomUiCmdSelect(
 	} else {
 		console.log("Launch main window")
 		return winExtMap
-			.registerExtensionWithWindow({
-				windowLabel: "main",
-				extPath: ext.extPath,
-				dist: cmd.dist
-			})
+			.registerExtensionWithWindow({ windowLabel: "main", extPath: ext.extPath, dist: cmd.dist })
 			.then(() => goto(url2))
 	}
 	appState.clearSearchTerm()
diff --git a/apps/desktop/src/lib/components/common/DragNDrop.svelte b/apps/desktop/src/lib/components/common/DragNDrop.svelte
new file mode 100644
index 0000000..c74dbce
--- /dev/null
+++ b/apps/desktop/src/lib/components/common/DragNDrop.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { listen, TauriEvent, type UnlistenFn } from "@tauri-apps/api/event"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { onDestroy, onMount, type Snippet } from "svelte"
+
+	let unlisteners: UnlistenFn[] = []
+	const {
+		children,
+		onEnter,
+		onDrop,
+		onCancelled,
+		onOver
+	}: {
+		children: Snippet
+		onEnter?: (event: any) => void
+		onDrop?: (event: any) => void
+		onCancelled?: (event: any) => void
+		onOver?: (event: any) => void
+	} = $props()
+	const appWin = getCurrentWebviewWindow()
+
+	onMount(async () => {
+		if (onEnter) await appWin.listen(TauriEvent.DRAG_ENTER, onEnter)
+		if (onDrop) await appWin.listen(TauriEvent.DRAG_DROP, onDrop)
+		if (onCancelled) await appWin.listen(TauriEvent.DRAG_LEAVE, onCancelled)
+		if (onOver) await appWin.listen(TauriEvent.DRAG_OVER, onOver)
+	})
+
+	onDestroy(() => {
+		for (const unlisten of unlisteners) {
+			unlisten()
+		}
+	})
+</script>
+
+<span>
+	{@render children()}
+</span>
diff --git a/apps/desktop/src/lib/components/standalone/settings/AddDevExtForm.svelte b/apps/desktop/src/lib/components/standalone/settings/AddDevExtForm.svelte
new file mode 100644
index 0000000..53f66d3
--- /dev/null
+++ b/apps/desktop/src/lib/components/standalone/settings/AddDevExtForm.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import DragNDrop from "@/components/common/DragNDrop.svelte"
+	import DevExtPathForm from "@/components/standalone/settings/DevExtPathForm.svelte"
+	import { appConfig, extensions } from "@/stores"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { IconEnum } from "@kksh/api/models"
+	import * as extAPI from "@kksh/extension"
+	import { installFromNpmPackageName } from "@kksh/extension"
+	import { Button, Card } from "@kksh/svelte5"
+	import { cn } from "@kksh/svelte5/utils"
+	import { IconMultiplexer, Layouts, StrikeSeparator } from "@kksh/ui"
+	import { open as openFileSelector } from "@tauri-apps/plugin-dialog"
+	import * as fs from "@tauri-apps/plugin-fs"
+	import { enhance } from "$app/forms"
+	import { goto } from "$app/navigation"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { toast } from "svelte-sonner"
+	import * as v from "valibot"
+	import InstallNpmPackageNameForm from "./install-npm-package-name-form.svelte"
+	import InstallTarballUrlForm from "./install-tarball-url-form.svelte"
+
+	let dragging = $state(false)
+
+	async function handleDragNDropInstall(paths: string[]) {
+		dragging = false
+		console.log(paths)
+		for (const path of paths) {
+			const stat = await fs.stat(path)
+			if (await stat.isDirectory) {
+				await extensions
+					.installDevExtensionDir(path)
+					.then((ext) => {
+						toast.success("Success", {
+							description: `Extension from ${ext.extPath} installed successfully`
+						})
+					})
+					.catch((err) => {
+						toast.warning("Failed to install extension", { description: err })
+					})
+			} else if (await stat.isFile) {
+				if (!$appConfig.devExtensionPath) {
+					toast.warning(
+						"Please set the dev extension path in the settings to install tarball extension"
+					)
+					continue
+				}
+				await extensions
+					.installTarball(path, $appConfig.devExtensionPath)
+					.then((ext) => {
+						toast.success("Success", {
+							description: `Extension from ${path} installed successfully`
+						})
+					})
+					.catch((err) => {
+						toast.warning("Failed to install extension", { description: err })
+					})
+			} else {
+				toast.warning(`Unsupported file type: ${path}`)
+			}
+			// await installDevExtensionDir(path)
+		}
+	}
+
+	async function pickExtFolders() {
+		const selected = await openFileSelector({
+			directory: true,
+			multiple: true // allow install multiple extensions at once
+		})
+		if (!selected) {
+			return toast.warning("No File Selected")
+		}
+		for (const dir of selected) {
+			await extensions
+				.installDevExtensionDir(dir)
+				.then((ext) => {
+					toast.success("Success", {
+						description: `Extension from ${ext.extPath} installed successfully`
+					})
+				})
+				.catch((err) => {
+					toast.warning("Failed to install extension", { description: err })
+				})
+		}
+	}
+
+	async function pickExtFiles() {
+		if (!$appConfig.devExtensionPath) {
+			toast.warning("Please set the dev extension path in the settings")
+			return goto("/settings/set-dev-ext-path")
+		}
+		const selected = await openFileSelector({
+			directory: false,
+			multiple: true, // allow install multiple extensions at once
+			filters: [
+				{
+					name: "tarball file",
+					extensions: ["tgz", "gz", "kunkun"]
+				}
+			]
+		})
+		if (!selected) {
+			return toast.warning("No File Selected")
+		}
+		console.log(selected)
+		for (const tarballPath of selected) {
+			await extensions.installTarball(tarballPath, $appConfig.devExtensionPath)
+		}
+	}
+</script>
+
+<div class="flex justify-center gap-3">
+	<Button size="sm" onclick={pickExtFolders}>Install from Extension Folders</Button>
+	<Button size="sm" onclick={pickExtFiles}>Install from Extension Tarball File</Button>
+</div>
+
+<StrikeSeparator class="my-1">
+	<h3 class="text-muted-foreground font-mono text-sm">Drag and Drop</h3>
+</StrikeSeparator>
+
+<Layouts.Center>
+	<DragNDrop
+		onDrop={(e) => {
+			handleDragNDropInstall(e.payload.paths)
+		}}
+		onEnter={() => (dragging = true)}
+		onCancelled={() => (dragging = false)}
+	>
+		<Card.Root
+			class={cn("h-36 w-96", dragging ? "border-lime-400/30" : "text-white hover:text-blue-200")}
+		>
+			<div class="flex h-full cursor-pointer items-center justify-center">
+				<div class={cn("flex flex-col items-center", dragging ? "text-lime-400/70" : "")}>
+					<IconMultiplexer
+						icon={{ value: "mdi:folder-cog-outline", type: IconEnum.Iconify }}
+						class="h-10 w-10"
+					/>
+					<small class="select-none font-mono text-xs">Drag and Drop</small>
+					<small class="select-none font-mono text-xs">Extension Folder or Tarball</small>
+				</div>
+			</div>
+		</Card.Root>
+	</DragNDrop>
+</Layouts.Center>
+<StrikeSeparator class="my-1">
+	<h3 class="text-muted-foreground font-mono text-sm">Install Tarball From URL</h3>
+</StrikeSeparator>
+<InstallTarballUrlForm />
+<InstallNpmPackageNameForm />
diff --git a/apps/desktop/src/lib/components/standalone/settings/install-npm-package-name-form.svelte b/apps/desktop/src/lib/components/standalone/settings/install-npm-package-name-form.svelte
new file mode 100644
index 0000000..4cb78b5
--- /dev/null
+++ b/apps/desktop/src/lib/components/standalone/settings/install-npm-package-name-form.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { appConfig, extensions } from "@/stores"
+	import { Input } from "@kksh/svelte5"
+	import { Form } from "@kksh/ui"
+	import { goto } from "$app/navigation"
+	import { toast } from "svelte-sonner"
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
+	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
+	import * as v from "valibot"
+
+	const npmPackageNameFormSchema = v.object({
+		name: v.pipe(v.string(), v.minLength(1))
+	})
+
+	async function onNpmPackageNameSubmit(data: v.InferOutput<typeof npmPackageNameFormSchema>) {
+		if (!$appConfig.devExtensionPath) {
+			toast.warning(
+				"Please set the dev extension path in the settings to install tarball extension"
+			)
+			return goto("/settings/set-dev-ext-path")
+		}
+		await extensions
+			.installFromNpmPackageName(data.name, $appConfig.devExtensionPath)
+			.then(() => {
+				toast.success("Success", { description: "Extension installed successfully" })
+			})
+			.catch((err) => {
+				toast.warning("Failed to install extension", { description: err })
+			})
+	}
+
+	const form = superForm(defaults(valibot(npmPackageNameFormSchema)), {
+		validators: valibotClient(npmPackageNameFormSchema),
+		SPA: true,
+		onUpdate({ form, cancel }) {
+			if (!form.valid) {
+				console.log("invalid")
+				return
+			}
+			console.log(form.data)
+			onNpmPackageNameSubmit(form.data)
+			cancel()
+		}
+	})
+
+	const { form: formData, enhance, errors } = form
+</script>
+
+<form method="POST" use:enhance>
+	<Form.Field {form} name="name">
+		<Form.Control>
+			{#snippet children({ props })}
+				<flex items-center gap-2>
+					<Input {...props} bind:value={$formData.name} placeholder="NPM Package Name" />
+					<Form.Button class="my-1">Install</Form.Button>
+				</flex>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+</form>
diff --git a/apps/desktop/src/lib/components/standalone/settings/install-tarball-url-form.svelte b/apps/desktop/src/lib/components/standalone/settings/install-tarball-url-form.svelte
new file mode 100644
index 0000000..a950a64
--- /dev/null
+++ b/apps/desktop/src/lib/components/standalone/settings/install-tarball-url-form.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { appConfig, extensions } from "@/stores"
+	import { Input } from "@kksh/svelte5"
+	import { Form } from "@kksh/ui"
+	import { goto } from "$app/navigation"
+	import { toast } from "svelte-sonner"
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
+	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
+	import * as v from "valibot"
+
+	const urlFormSchema = v.object({
+		url: v.pipe(v.string(), v.url())
+	})
+
+	async function onUrlSubmit(data: v.InferOutput<typeof urlFormSchema>) {
+		// data.url
+		// https://storage.huakun.tech/vscode-0.0.6.tgz
+		if (!$appConfig.devExtensionPath) {
+			toast.warning(
+				"Please set the dev extension path in the settings to install tarball extension"
+			)
+			return goto("/settings/set-dev-ext-path")
+		}
+		await extensions
+			.installFromTarballUrl(data.url, $appConfig.devExtensionPath)
+			.then(() => {
+				toast.success("Sucecss", { description: "Extension installed successfully" })
+			})
+			.catch((err) => {
+				toast.warning("Failed to install extension", { description: err })
+			})
+	}
+
+	const form = superForm(defaults(valibot(urlFormSchema)), {
+		validators: valibotClient(urlFormSchema),
+		SPA: true,
+		onUpdate({ form, cancel }) {
+			if (!form.valid) {
+				console.log("invalid")
+				return
+			}
+			console.log(form.data)
+			onUrlSubmit(form.data)
+			cancel()
+		}
+	})
+	const { form: formData, enhance, errors } = form
+</script>
+
+<form method="POST" use:enhance>
+	<Form.Field {form} name="url">
+		<Form.Control>
+			{#snippet children({ props })}
+				<flex items-center gap-2>
+					<Input {...props} bind:value={$formData.url} placeholder="Tarball URL" />
+					<Form.Button class="my-1">Install</Form.Button>
+				</flex>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+</form>
diff --git a/apps/desktop/src/lib/stores/appState.ts b/apps/desktop/src/lib/stores/appState.ts
index 7b6b737..d45c87a 100644
--- a/apps/desktop/src/lib/stores/appState.ts
+++ b/apps/desktop/src/lib/stores/appState.ts
@@ -1,17 +1,23 @@
 import { findAllArgsInLink } from "@/cmds/quick-links"
-import { CmdTypeEnum } from "@kksh/api/models"
+import { Action as ActionSchema, CmdTypeEnum } from "@kksh/api/models"
 import type { AppState } from "@kksh/types"
 import type { CmdValue } from "@kksh/ui/types"
 import { derived, get, writable, type Writable } from "svelte/store"
 
 export const defaultAppState: AppState = {
 	searchTerm: "",
-	highlightedCmd: ""
+	highlightedCmd: "",
+	loadingBar: false,
+	defaultAction: "",
+	actionPanel: undefined
 }
 
 interface AppStateAPI {
 	clearSearchTerm: () => void
 	get: () => AppState
+	setLoadingBar: (loadingBar: boolean) => void
+	setDefaultAction: (defaultAction: string) => void
+	setActionPanel: (actionPanel?: ActionSchema.ActionPanel) => void
 }
 
 function createAppState(): Writable<AppState> & AppStateAPI {
@@ -22,18 +28,17 @@ function createAppState(): Writable<AppState> & AppStateAPI {
 		get: () => get(store),
 		clearSearchTerm: () => {
 			store.update((state) => ({ ...state, searchTerm: "" }))
+		},
+		setLoadingBar: (loadingBar: boolean) => {
+			store.update((state) => ({ ...state, loadingBar }))
+		},
+		setDefaultAction: (defaultAction: string) => {
+			store.update((state) => ({ ...state, defaultAction }))
+		},
+		setActionPanel: (actionPanel?: ActionSchema.ActionPanel) => {
+			store.update((state) => ({ ...state, actionPanel }))
 		}
 	}
 }
 
 export const appState = createAppState()
-
-// export const cmdQueries = derived(appState, ($appState) => {
-// 	if ($appState.highlightedCmd.startsWith("{")) {
-// 		const parsedCmd = JSON.parse($appState.highlightedCmd) as CmdValue
-// 		if (parsedCmd.cmdType === CmdTypeEnum.QuickLink && parsedCmd.data) {
-// 			return findAllArgsInLink(parsedCmd.data).map((arg) => ({ name: arg, value: "" }))
-// 		}
-// 	}
-// 	return []
-// })
diff --git a/apps/desktop/src/lib/stores/extensions.ts b/apps/desktop/src/lib/stores/extensions.ts
index 62d949c..770ed2a 100644
--- a/apps/desktop/src/lib/stores/extensions.ts
+++ b/apps/desktop/src/lib/stores/extensions.ts
@@ -10,7 +10,10 @@ import { appConfig } from "./appConfig"
 function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 	init: () => Promise<void>
 	getExtensionsFromStore: () => ExtPackageJsonExtra[]
+	installTarball: (tarballPath: string, extsDir: string) => Promise<ExtPackageJsonExtra>
+	installDevExtensionDir: (dirPath: string) => Promise<ExtPackageJsonExtra>
 	installFromTarballUrl: (tarballUrl: string, installDir: string) => Promise<ExtPackageJsonExtra>
+	installFromNpmPackageName: (name: string, installDir: string) => Promise<ExtPackageJsonExtra>
 	findStoreExtensionByIdentifier: (identifier: string) => ExtPackageJsonExtra | undefined
 	registerNewExtensionByPath: (extPath: string) => Promise<ExtPackageJsonExtra>
 	uninstallStoreExtensionByIdentifier: (identifier: string) => Promise<ExtPackageJsonExtra>
@@ -56,12 +59,36 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 			})
 	}
 
+	/**
+	 * Install extension from tarball file
+	 * @param tarballPath absolute path to the tarball file
+	 * @param extsDir absolute path to the extensions directory
+	 * @returns loaded extension
+	 */
+	async function installTarball(tarballPath: string, extsDir: string) {
+		return extAPI.installTarballUrl(tarballPath, extsDir).then((extInstallPath) => {
+			return registerNewExtensionByPath(extInstallPath)
+		})
+	}
+
+	async function installDevExtensionDir(dirPath: string) {
+		return extAPI.installDevExtensionDir(dirPath).then((ext) => {
+			return registerNewExtensionByPath(ext.extPath)
+		})
+	}
+
 	async function installFromTarballUrl(tarballUrl: string, extsDir: string) {
 		return extAPI.installTarballUrl(tarballUrl, extsDir).then((extInstallPath) => {
 			return registerNewExtensionByPath(extInstallPath)
 		})
 	}
 
+	async function installFromNpmPackageName(name: string, extsDir: string) {
+		return extAPI.installFromNpmPackageName(name, extsDir).then((extInstallPath) => {
+			return registerNewExtensionByPath(extInstallPath)
+		})
+	}
+
 	async function uninstallExtensionByPath(targetPath: string) {
 		const targetExt = get(extensions).find((ext) => ext.extPath === targetPath)
 		if (!targetExt) throw new Error(`Extension ${targetPath} not registered in DB`)
@@ -96,7 +123,10 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 		getExtensionsFromStore,
 		findStoreExtensionByIdentifier,
 		registerNewExtensionByPath,
+		installTarball,
+		installDevExtensionDir,
 		installFromTarballUrl,
+		installFromNpmPackageName,
 		uninstallStoreExtensionByIdentifier,
 		upgradeStoreExtension
 	}
diff --git a/apps/desktop/src/lib/stores/quick-links.ts b/apps/desktop/src/lib/stores/quick-links.ts
index 4dfb348..e265ca4 100644
--- a/apps/desktop/src/lib/stores/quick-links.ts
+++ b/apps/desktop/src/lib/stores/quick-links.ts
@@ -19,8 +19,6 @@ function createQuickLinksStore(): Writable<QuickLink[]> & QuickLinkAPI {
 
 	async function refresh() {
 		const cmds = await getAllQuickLinkCommands()
-		console.log(cmds)
-
 		store.set(cmds.map((cmd) => ({ link: cmd.data.link, name: cmd.name, icon: cmd.data.icon })))
 	}
 
diff --git a/apps/desktop/src/routes/+layout.svelte b/apps/desktop/src/routes/+layout.svelte
index 774f061..e0dfed2 100644
--- a/apps/desktop/src/routes/+layout.svelte
+++ b/apps/desktop/src/routes/+layout.svelte
@@ -17,6 +17,12 @@
 	import { attachConsole } from "@tauri-apps/plugin-log"
 	import { onDestroy, onMount } from "svelte"
 
+	onMount(() => {
+		setTimeout(() => {
+			import("virtual:uno.css")
+		}, 1000)
+	})
+
 	let { children } = $props()
 	const unlisteners: UnlistenFn[] = []
 
diff --git a/apps/desktop/src/routes/+page.svelte b/apps/desktop/src/routes/+page.svelte
index 47747b2..be1be7f 100644
--- a/apps/desktop/src/routes/+page.svelte
+++ b/apps/desktop/src/routes/+page.svelte
@@ -5,7 +5,6 @@
 	import { systemCommands } from "@/cmds/system"
 	import { appConfig, appState, devStoreExts, installedStoreExts, quickLinks } from "@/stores"
 	import { cmdQueries } from "@/stores/cmdQuery"
-	import { commandScore } from "@/utils/command-score"
 	import { getActiveElementNodeName } from "@/utils/dom"
 	import { openDevTools } from "@kksh/api/commands"
 	import type { ExtPackageJsonExtra } from "@kksh/api/models"
@@ -21,7 +20,7 @@
 		SystemCmds
 	} from "@kksh/ui/main"
 	import type { BuiltinCmd, CmdValue, CommandLaunchers } from "@kksh/ui/types"
-	import { cn } from "@kksh/ui/utils"
+	import { cn, commandScore } from "@kksh/ui/utils"
 	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
 	import { exit } from "@tauri-apps/plugin-process"
 	import { EllipsisVerticalIcon } from "lucide-svelte"
@@ -105,7 +104,6 @@
 	</CustomCommandInput>
 	<Command.List class="max-h-screen grow">
 		<Command.Empty data-tauri-drag-region>No results found.</Command.Empty>
-		<Command.Separator />
 		{#if $appConfig.extensionsInstallDir && $devStoreExts.length > 0}
 			<ExtCmdsGroup
 				extensions={$devStoreExts}
@@ -114,7 +112,6 @@
 				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
 				hmr={$appConfig.hmr}
 			/>
-			<Command.Separator />
 		{/if}
 		{#if $appConfig.extensionsInstallDir && $installedStoreExts.length > 0}
 			<ExtCmdsGroup
@@ -124,11 +121,9 @@
 				hmr={false}
 				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
 			/>
-			<Command.Separator />
 		{/if}
 		<QuickLinks quickLinks={$quickLinks} />
 		<BuiltinCmds {builtinCmds} />
-		<Command.Separator />
 		<SystemCmds {systemCommands} />
 	</Command.List>
 	<GlobalCommandPaletteFooter />
diff --git a/apps/desktop/src/routes/extension/create-quick-link/+page.svelte b/apps/desktop/src/routes/extension/create-quick-link/+page.svelte
index 828755f..4e782f4 100644
--- a/apps/desktop/src/routes/extension/create-quick-link/+page.svelte
+++ b/apps/desktop/src/routes/extension/create-quick-link/+page.svelte
@@ -3,19 +3,18 @@
 	import { goBackOnEscape } from "@/utils/key"
 	import { goBack } from "@/utils/route"
 	import { Icon, IconEnum, IconType } from "@kksh/api/models"
-	import { createQuickLinkCommand } from "@kksh/extension/db"
 	import { Button, Input } from "@kksh/svelte5"
 	import { Form, IconSelector } from "@kksh/ui"
 	import { dev } from "$app/environment"
 	import { ArrowLeftIcon } from "lucide-svelte"
 	import { toast } from "svelte-sonner"
 	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
-	import { valibot, valibotClient, zod, zodClient } from "sveltekit-superforms/adapters"
+	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
 	import * as v from "valibot"
 
 	const formSchema = v.object({
 		name: v.pipe(v.string(), v.minLength(1), v.maxLength(100)),
-		link: v.pipe(v.string(), v.minLength(5), v.maxLength(1000)),
+		link: v.pipe(v.string(), v.url(), v.minLength(5), v.maxLength(1000)),
 		iconType: IconType,
 		iconValue: v.string(),
 		invertIcon: v.boolean()
@@ -63,7 +62,7 @@
 	$effect(() => {
 		$formData.iconType = icon.type
 		$formData.iconValue = icon.value
-		$formData.invertIcon = icon.invert
+		$formData.invertIcon = icon.invert ?? false
 	})
 </script>
 
@@ -99,12 +98,11 @@
 		<input name="iconType" hidden type="text" bind:value={$formData.iconType} />
 		<input name="iconValue" hidden type="text" bind:value={$formData.iconValue} />
 		<input name="invertIcon" hidden type="text" bind:value={$formData.invertIcon} />
-		<br />
-		<Form.Button>Submit</Form.Button>
+		<Form.Button class="my-1">Submit</Form.Button>
 	</form>
 </div>
 {#if dev}
-	<div class="p-3">
+	<div class="p-5">
 		<SuperDebug data={$formData} />
 	</div>
 {/if}
diff --git a/apps/desktop/src/routes/extension/ui-worker/+page.svelte b/apps/desktop/src/routes/extension/ui-worker/+page.svelte
index 5bf03f4..2dffffc 100644
--- a/apps/desktop/src/routes/extension/ui-worker/+page.svelte
+++ b/apps/desktop/src/routes/extension/ui-worker/+page.svelte
@@ -1 +1,289 @@
-<script lang="ts"></script>
+<script lang="ts">
+	import { appState } from "@/stores/appState.js"
+	import { winExtMap } from "@/stores/winExtMap.js"
+	import { listenToRefreshDevExt } from "@/utils/tauri-events.js"
+	import { isInMainWindow } from "@/utils/window.js"
+	import { type Remote } from "@huakunshen/comlink"
+	import { db } from "@kksh/api/commands"
+	import {
+		constructJarvisServerAPIWithPermissions,
+		exposeApiToWorker,
+		type IApp,
+		type IUiWorker
+	} from "@kksh/api/ui"
+	import {
+		// constructJarvisExtDBToServerDbAPI,
+		FormNodeNameEnum,
+		FormSchema,
+		ListSchema,
+		Markdown,
+		MarkdownSchema,
+		NodeNameEnum,
+		toast,
+		wrap,
+		type IComponent,
+		type IDb,
+		type WorkerExtension
+	} from "@kksh/api/ui/worker"
+	import { Button } from "@kksh/svelte5"
+	import { LoadingBar } from "@kksh/ui"
+	import { Templates } from "@kksh/ui/extension"
+	import { GlobalCommandPaletteFooter } from "@kksh/ui/main"
+	import type { UnlistenFn } from "@tauri-apps/api/event"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { readTextFile } from "@tauri-apps/plugin-fs"
+	import { debug } from "@tauri-apps/plugin-log"
+	import { goto } from "$app/navigation"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { onDestroy, onMount } from "svelte"
+	import * as v from "valibot"
+
+	const { data } = $props()
+	let { loadedExt, scriptPath, extInfoInDB } = $derived(data)
+	let workerAPI: Remote<WorkerExtension> | undefined = undefined
+	let unlistenRefreshWorkerExt: UnlistenFn | undefined
+	let worker: Worker | undefined
+	let listViewContent = $state<ListSchema.List>()
+	let formViewContent = $state<FormSchema.Form>()
+	let markdownViewContent = $state<MarkdownSchema>()
+	let extensionLoadingBar = $state(false) // whether extension called showLoadingBar
+	let pbar = $state<number | null>(null)
+	let loading = $state(false)
+	let searchTerm = $state("")
+	let searchBarPlaceholder = $state("")
+	const appWin = getCurrentWebviewWindow()
+	const loadingBar = $derived($appState.loadingBar || extensionLoadingBar)
+	let loaded = $state(false)
+
+	async function goBack() {
+		if (isInMainWindow()) {
+			// if in main window, then winExtMap store must contain this
+			winExtMap.unregisterExtensionFromWindow(appWin.label)
+			goto("/")
+		} else {
+			appWin.close()
+		}
+	}
+
+	function clearViewContent(keep?: "list" | "form" | "markdown") {
+		if (keep !== "list") {
+			listViewContent = undefined
+		}
+		if (keep !== "form") {
+			formViewContent = undefined
+		}
+		if (keep !== "markdown") {
+			markdownViewContent = undefined
+		}
+	}
+
+	const extUiAPI: IUiWorker = {
+		async render(view: IComponent<ListSchema.List | FormSchema.Form | MarkdownSchema>) {
+			if (view.nodeName === NodeNameEnum.List) {
+				clearViewContent("list")
+				const parsedListView = v.parse(ListSchema.List, view)
+				const updateFields = {
+					sections: true,
+					items: true,
+					detail: true,
+					filter: true,
+					actions: true,
+					defaultAction: true
+				}
+				if (listViewContent) {
+					if (parsedListView.inherits && parsedListView.inherits.length > 0) {
+						if (parsedListView.inherits.includes("items")) {
+							updateFields.items = false
+						}
+						if (parsedListView.inherits.includes("sections")) {
+							updateFields.sections = false
+						}
+						if (parsedListView.inherits.includes("detail")) {
+							updateFields.detail = false
+						}
+						if (parsedListView.inherits.includes("filter")) {
+							updateFields.filter = false
+						}
+						if (parsedListView.inherits.includes("actions")) {
+							updateFields.actions = false
+						}
+						if (parsedListView.inherits.includes("defaultAction")) {
+							updateFields.defaultAction = false
+						}
+						if (updateFields.items) {
+							listViewContent.items = parsedListView.items
+						}
+						if (updateFields.sections) {
+							listViewContent.sections = parsedListView.sections
+						}
+						if (updateFields.detail) {
+							listViewContent.detail = parsedListView.detail
+						}
+						if (updateFields.filter) {
+							listViewContent.filter = parsedListView.filter
+						}
+						if (updateFields.actions) {
+							listViewContent.actions = parsedListView.actions
+						}
+						if (updateFields.defaultAction) {
+							listViewContent.defaultAction = parsedListView.defaultAction
+						}
+						listViewContent.inherits = parsedListView.inherits
+					} else {
+						listViewContent = parsedListView
+					}
+				} else {
+					listViewContent = parsedListView
+				}
+
+				// if (parsedListView.updateDetailOnly) {
+				// 	if (listViewContent) {
+				// 		listViewContent.detail = parsedListView.detail
+				// 	} else {
+				// 		listViewContent = parsedListView
+				// 	}
+				// } else {
+				// 	listViewContent = parsedListView
+				// }
+			} else if (view.nodeName === FormNodeNameEnum.Form) {
+				listViewContent = undefined
+				clearViewContent("form")
+				const parsedForm = v.parse(FormSchema.Form, view)
+				formViewContent = parsedForm
+				// TODO: convert form to zod schema
+				// const zodSchema = convertFormToZod(parsedForm)
+				// formViewZodSchema = zodSchema
+				// formFieldConfig = buildFieldConfig(parsedForm)
+			} else if (view.nodeName === NodeNameEnum.Markdown) {
+				clearViewContent("markdown")
+				markdownViewContent = v.parse(MarkdownSchema, view)
+			} else {
+				toast.error(`Unsupported view type: ${view.nodeName}`)
+			}
+		},
+		async showLoadingBar(loading: boolean) {
+			// appState.setLoadingBar(loading)
+			extensionLoadingBar = loading
+		},
+		async setProgressBar(progress: number | null) {
+			pbar = progress
+		},
+		async setScrollLoading(_loading: boolean) {
+			loading = _loading
+		},
+		async setSearchTerm(term: string) {
+			searchTerm = term
+		},
+		async setSearchBarPlaceholder(placeholder: string) {
+			console.log("setSearchBarPlaceholder", placeholder)
+			searchBarPlaceholder = placeholder
+		},
+		async goBack() {
+			goBack()
+		}
+	}
+
+	async function launchWorkerExt() {
+		if (worker) {
+			worker.terminate()
+			worker = undefined
+		}
+		const workerScript = await readTextFile(scriptPath)
+		const blob = new Blob([workerScript], { type: "application/javascript" })
+		const blobURL = URL.createObjectURL(blob)
+		worker = new Worker(blobURL)
+		const serverAPI: Record<string, any> = constructJarvisServerAPIWithPermissions(
+			loadedExt.kunkun.permissions,
+			loadedExt.extPath
+		)
+		serverAPI.iframeUi = undefined
+		serverAPI.workerUi = extUiAPI
+		serverAPI.db = new db.JarvisExtDB(extInfoInDB.extId)
+		serverAPI.app = {
+			language: () => Promise.resolve("en")
+		} satisfies IApp
+		exposeApiToWorker(worker, serverAPI)
+		workerAPI = wrap<WorkerExtension>(worker)
+		await workerAPI.load()
+	}
+
+	$effect(() => {
+		launchWorkerExt()
+
+		return () => {
+			worker?.terminate()
+		}
+	})
+	onMount(async () => {
+		setTimeout(() => {
+			appState.setLoadingBar(true)
+			appWin.show()
+		}, 100)
+		unlistenRefreshWorkerExt = await listenToRefreshDevExt(() => {
+			debug("Refreshing Worker Extension")
+			launchWorkerExt()
+		})
+		setTimeout(() => {
+			appState.setLoadingBar(false)
+			loaded = true
+		}, 500)
+	})
+
+	onDestroy(() => {
+		unlistenRefreshWorkerExt?.()
+		extensionLoadingBar = false
+		appState.setActionPanel(undefined)
+	})
+</script>
+
+{#if loadingBar}
+	<LoadingBar class="fixed left-0 top-0 w-full" color="white" />
+{/if}
+{#if loaded && listViewContent !== undefined}
+	<Templates.ListView
+		bind:searchTerm
+		bind:searchBarPlaceholder
+		{pbar}
+		{listViewContent}
+		{loading}
+		onGoBack={goBack}
+		onListScrolledToBottom={() => {
+			workerAPI?.onListScrolledToBottom()
+		}}
+		onEnterKeyPressed={() => {
+			workerAPI?.onEnterPressedOnSearchBar()
+		}}
+		onListItemSelected={(value: string) => {
+			workerAPI?.onListItemSelected(value)
+		}}
+		onSearchTermChange={(searchTerm) => {
+			workerAPI?.onSearchTermChange(searchTerm)
+		}}
+		onHighlightedItemChanged={(value) => {
+			workerAPI?.onHighlightedListItemChanged(value)
+			if (listViewContent?.defaultAction) {
+				appState.setDefaultAction(listViewContent.defaultAction)
+			}
+			if (listViewContent?.actions) {
+				appState.setActionPanel(listViewContent.actions)
+			}
+		}}
+	>
+		{#snippet footer()}
+			<GlobalCommandPaletteFooter
+				defaultAction={$appState.defaultAction}
+				actionPanel={$appState.actionPanel}
+				onDefaultActionSelected={() => {
+					workerAPI?.onEnterPressedOnSearchBar()
+				}}
+				onActionSelected={(value) => {
+					workerAPI?.onActionSelected(value)
+				}}
+			/>
+		{/snippet}
+	</Templates.ListView>
+{:else if loaded && formViewContent !== undefined}
+	<Templates.FormView {formViewContent} onGoBack={goBack} />
+{:else if loaded && markdownViewContent !== undefined}
+	<Templates.MarkdownView {markdownViewContent} onGoBack={goBack} />
+{/if}
diff --git a/apps/desktop/src/routes/extension/ui-worker/+page.ts b/apps/desktop/src/routes/extension/ui-worker/+page.ts
new file mode 100644
index 0000000..711ac4a
--- /dev/null
+++ b/apps/desktop/src/routes/extension/ui-worker/+page.ts
@@ -0,0 +1,76 @@
+import { db, unregisterExtensionWindow } from "@kksh/api/commands"
+import type { Ext as ExtInfoInDB, ExtPackageJsonExtra } from "@kksh/api/models"
+import { loadExtensionManifestFromDisk } from "@kksh/extension"
+import { error as sbError } from "@sveltejs/kit"
+import { join } from "@tauri-apps/api/path"
+import { exists, readTextFile } from "@tauri-apps/plugin-fs"
+import { error } from "@tauri-apps/plugin-log"
+import { goto } from "$app/navigation"
+import { toast } from "svelte-sonner"
+import type { PageLoad } from "./$types"
+
+// : Promise<{
+// 	extPath: string
+// 	scriptPath: string
+// 	// workerScript: string
+// 	pkgJsonPath: string
+// 	cmdName: string
+// 	loadedExt: ExtPackageJsonExtra
+// 	extInfoInDB: ExtInfoInDB
+// }>
+
+export const load: PageLoad = async ({ url }) => {
+	// both query parameter must exist
+	const extPath = url.searchParams.get("extPath")
+	const cmdName = url.searchParams.get("cmdName")
+	if (!extPath || !cmdName) {
+		toast.error("Invalid extension path or url")
+		error("Invalid extension path or url")
+		goto("/")
+	}
+
+	let _loadedExt: ExtPackageJsonExtra | undefined
+	try {
+		_loadedExt = await loadExtensionManifestFromDisk(await join(extPath!, "package.json"))
+	} catch (err) {
+		error(`Error loading extension manifest: ${err}`)
+		toast.error("Error loading extension manifest", {
+			description: `${err}`
+		})
+		goto("/")
+	}
+	const loadedExt = _loadedExt!
+	const extInfoInDB = await db.getUniqueExtensionByPath(loadedExt.extPath)
+	if (!extInfoInDB) {
+		toast.error("Unexpected Error", {
+			description: `Extension ${loadedExt.kunkun.identifier} not found in database. Run Troubleshooter.`
+		})
+		goto("/")
+	}
+	const pkgJsonPath = await join(extPath!, "package.json")
+	if (!(await exists(extPath!))) {
+		sbError(404, `Extension not found at ${extPath}`)
+	}
+	if (!(await exists(pkgJsonPath))) {
+		sbError(404, `Extension package.json not found at ${pkgJsonPath}`)
+	}
+
+	const cmd = loadedExt.kunkun.templateUiCmds.find((cmd) => cmd.name === cmdName)
+	if (!cmd) {
+		sbError(404, `Command ${cmdName} not found in extension ${loadedExt.kunkun.identifier}`)
+	}
+	const scriptPath = await join(loadedExt.extPath, cmd.main)
+	if (!(await exists(scriptPath))) {
+		sbError(404, `Command script not found at ${scriptPath}`)
+	}
+	// const workerScript = await readTextFile(scriptPath)
+	return {
+		extPath: extPath!,
+		pkgJsonPath,
+		scriptPath,
+		// workerScript,
+		cmdName: cmdName!,
+		loadedExt,
+		extInfoInDB: extInfoInDB!
+	}
+}
diff --git a/apps/desktop/src/routes/settings/add-dev-extension/+page.svelte b/apps/desktop/src/routes/settings/add-dev-extension/+page.svelte
new file mode 100644
index 0000000..e8d9d1b
--- /dev/null
+++ b/apps/desktop/src/routes/settings/add-dev-extension/+page.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import AddDevExtForm from "@/components/standalone/settings/AddDevExtForm.svelte"
+	import DevExtPathForm from "@/components/standalone/settings/DevExtPathForm.svelte"
+	import { appConfig, extensions } from "@/stores"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import * as extAPI from "@kksh/extension"
+	import { installFromNpmPackageName } from "@kksh/extension"
+	import { Button, Separator } from "@kksh/svelte5"
+	import { StrikeSeparator } from "@kksh/ui"
+	import { open as openFileSelector } from "@tauri-apps/plugin-dialog"
+	import * as fs from "@tauri-apps/plugin-fs"
+	import { goto } from "$app/navigation"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { toast } from "svelte-sonner"
+	import * as v from "valibot"
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button variant="outline" size="icon" class="fixed left-2 top-2 z-50" onclick={goBack}>
+	<ArrowLeftIcon class="h-4 w-4" />
+</Button>
+<div class="absolute left-0 top-0 h-10 w-screen" data-tauri-drag-region></div>
+<main class="container pt-10">
+	<h2 class="text-2xl font-bold">Add Dev Extension</h2>
+	<small>
+		There are 4 options to install an extension in developer mode. Either load it from your local
+		tarball file, a tarball remote URL, npm package name or load from a remote URL.
+	</small>
+	<AddDevExtForm />
+</main>
diff --git a/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte b/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte
index 290feb1..5d5d0ee 100644
--- a/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte
+++ b/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <svelte:window on:keydown={goBackOnEscape} />
-<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
+<Button variant="outline" size="icon" class="fixed left-2 top-2 z-50" onclick={goBack}>
 	<ArrowLeftIcon class="h-4 w-4" />
 </Button>
 <div class="absolute left-0 top-0 h-10 w-screen" data-tauri-drag-region></div>
diff --git a/apps/desktop/tailwind.config.ts b/apps/desktop/tailwind.config.ts
index 12ab766..95c4e88 100644
--- a/apps/desktop/tailwind.config.ts
+++ b/apps/desktop/tailwind.config.ts
@@ -1,3 +1,4 @@
+import typography from "@tailwindcss/typography"
 import type { Config } from "tailwindcss"
 import tailwindcssAnimate from "tailwindcss-animate"
 import { fontFamily } from "tailwindcss/defaultTheme"
@@ -94,7 +95,7 @@ const config: Config = {
 			}
 		}
 	},
-	plugins: [tailwindcssAnimate]
+	plugins: [tailwindcssAnimate, typography]
 }
 
 export default config
diff --git a/apps/desktop/uno.config.ts b/apps/desktop/uno.config.ts
new file mode 100644
index 0000000..7ca4602
--- /dev/null
+++ b/apps/desktop/uno.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig, presetAttributify, presetTagify, presetUno } from "unocss"
+
+export default defineConfig({
+	presets: [presetUno(), presetAttributify(), presetTagify()]
+})
diff --git a/apps/desktop/vite.config.js b/apps/desktop/vite.config.js
index 7aa392c..197838c 100644
--- a/apps/desktop/vite.config.js
+++ b/apps/desktop/vite.config.js
@@ -1,4 +1,5 @@
 import { sveltekit } from "@sveltejs/kit/vite"
+import UnoCSS from "unocss/vite"
 import { defineConfig } from "vite"
 
 // @ts-expect-error process is a nodejs global
@@ -6,7 +7,7 @@ const host = process.env.TAURI_DEV_HOST
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-	plugins: [sveltekit()],
+	plugins: [UnoCSS(), sveltekit()],
 
 	// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
 	//
diff --git a/packages/api/jsr.json b/packages/api/jsr.json
index 334de1a..37cc4c3 100644
--- a/packages/api/jsr.json
+++ b/packages/api/jsr.json
@@ -1,7 +1,7 @@
 {
 	"$schema": "https://jsr.io/schema/config-file.v1.json",
 	"name": "@kunkun/api",
-	"version": "0.0.27",
+	"version": "0.0.28",
 	"license": "MIT",
 	"exports": {
 		".": "./src/index.ts",
diff --git a/packages/api/package.json b/packages/api/package.json
index f171610..96ea468 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@kksh/api",
-	"version": "0.0.27",
+	"version": "0.0.28",
 	"type": "module",
 	"exports": {
 		".": "./src/index.ts",
diff --git a/packages/api/src/constants.ts b/packages/api/src/constants.ts
index a3b8789..83fda7a 100644
--- a/packages/api/src/constants.ts
+++ b/packages/api/src/constants.ts
@@ -7,7 +7,7 @@ export enum KUNKUN_EXT_IDENTIFIER {
 }
 
 export const KUNKUN_DESKTOP_APP_SERVER_PORTS = [1566, 1567, 1568, 9559, 9560, 9561]
-export const DESKTOP_SERVICE_NAME = "Kunkun"
+export const DESKTOP_SERVICE_NAME = "kunkun"
 
 /* -------------------------------------------------------------------------- */
 /*                                  Deep Link                                 */
diff --git a/packages/api/src/dev/index.ts b/packages/api/src/dev/index.ts
index 196fc7b..dd04977 100644
--- a/packages/api/src/dev/index.ts
+++ b/packages/api/src/dev/index.ts
@@ -15,7 +15,7 @@ export function checkLocalKunkunService(port: number): Promise<boolean> {
 			return res.json()
 		})
 		.then((data) => {
-			return data["service_name"] === DESKTOP_SERVICE_NAME
+			return data["service_name"].toLowerCase() === DESKTOP_SERVICE_NAME.toLowerCase()
 		})
 		.catch((err) => {
 			// fetch fail, i.e. server not on this port
diff --git a/packages/api/src/ui/client.ts b/packages/api/src/ui/client.ts
index c4aff94..d2a0d44 100644
--- a/packages/api/src/ui/client.ts
+++ b/packages/api/src/ui/client.ts
@@ -33,6 +33,7 @@ import type { fileSearch } from "../commands/fileSearch"
 import { type AppInfo } from "../models/apps"
 import type { LightMode, Position, Radius, ThemeColor } from "../models/styles"
 import type { DenoSysOptions } from "../permissions/schema"
+import type { MarkdownSchema } from "./worker"
 import { type IComponent } from "./worker/components/interfaces"
 import type { Markdown } from "./worker/components/markdown"
 import * as FormSchema from "./worker/schema/form"
@@ -116,7 +117,7 @@ export interface IToast {
 }
 
 export interface IUiWorker {
-	render: (view: IComponent<ListSchema.List | FormSchema.Form | Markdown>) => Promise<void>
+	render: (view: IComponent<ListSchema.List | FormSchema.Form | MarkdownSchema>) => Promise<void>
 	goBack: () => Promise<void>
 	showLoadingBar: (loading: boolean) => Promise<void>
 	setScrollLoading: (loading: boolean) => Promise<void>
diff --git a/packages/api/src/ui/worker/components/form-view.ts b/packages/api/src/ui/worker/components/form-view.ts
index 5f25a7c..7cb661c 100644
--- a/packages/api/src/ui/worker/components/form-view.ts
+++ b/packages/api/src/ui/worker/components/form-view.ts
@@ -145,6 +145,9 @@ export class Form implements IComponent<FormSchema.Form> {
 	constructor(model: OmitNodeName<FormSchema.Form & { fields: (AllFormFields | Form)[] }>) {
 		this.fields = model.fields
 		this.key = model.key
+		this.title = model.title
+		this.description = model.description
+		this.submitBtnText = model.submitBtnText
 	}
 
 	toModel(): FormSchema.Form {
diff --git a/packages/api/src/ui/worker/schema/form.ts b/packages/api/src/ui/worker/schema/form.ts
index 711dc82..7b1c125 100644
--- a/packages/api/src/ui/worker/schema/form.ts
+++ b/packages/api/src/ui/worker/schema/form.ts
@@ -65,7 +65,8 @@ export type BaseField = InferOutput<typeof BaseField>
 export const InputField = object({
 	...BaseField.entries,
 	type: optional(InputTypes),
-	component: optional(union([literal("textarea"), literal("default")]))
+	component: optional(union([literal("textarea"), literal("default")])),
+	default: optional(string())
 })
 export type InputField = InferOutput<typeof InputField>
 
@@ -74,7 +75,8 @@ export type InputField = InferOutput<typeof InputField>
 /* -------------------------------------------------------------------------- */
 export const NumberField = object({
 	...BaseField.entries,
-	nodeName: FormNodeName
+	nodeName: FormNodeName,
+	default: optional(number())
 })
 export type NumberField = InferOutput<typeof NumberField>
 
@@ -84,7 +86,8 @@ export type NumberField = InferOutput<typeof NumberField>
 // with zod enum
 export const SelectField = object({
 	...BaseField.entries,
-	options: array(string())
+	options: array(string()),
+	default: optional(string())
 })
 export type SelectField = InferOutput<typeof SelectField>
 
@@ -101,7 +104,8 @@ export type BooleanField = InferOutput<typeof BooleanField>
 /*                                    Date                                    */
 /* -------------------------------------------------------------------------- */
 export const DateField = object({
-	...BaseField.entries
+	...BaseField.entries,
+	default: optional(string())
 })
 export type DateField = InferOutput<typeof DateField>
 
@@ -121,14 +125,22 @@ export type ArrayField = InferOutput<typeof ArrayField>
 /* -------------------------------------------------------------------------- */
 export const FormField = union([
 	ArrayField, // this must be placed first, otherwise its content field won't be parsed
+	SelectField,
 	InputField,
 	NumberField,
-	SelectField,
 	BooleanField,
 	DateField
 ])
 export type FormField = InferOutput<typeof FormField>
 // export type Form = InferOutput<typeof Form>
+export const Form: GenericSchema<Form> = object({
+	nodeName: FormNodeName,
+	key: string(),
+	fields: array(union([lazy(() => Form), FormField])),
+	title: optional(string()),
+	description: optional(string()),
+	submitBtnText: optional(string())
+})
 export type Form = {
 	nodeName: FormNodeName
 	title?: string
@@ -137,8 +149,3 @@ export type Form = {
 	key: string
 	fields: (FormField | Form)[]
 }
-export const Form: GenericSchema<Form> = object({
-	nodeName: FormNodeName,
-	key: string(),
-	fields: array(union([lazy(() => Form), FormField]))
-})
diff --git a/packages/api/src/version.ts b/packages/api/src/version.ts
index ec7bba0..e056254 100644
--- a/packages/api/src/version.ts
+++ b/packages/api/src/version.ts
@@ -13,7 +13,7 @@ export const breakingChangesVersionCheckpoints = [
 const checkpointVersions = breakingChangesVersionCheckpoints.map((c) => c.version)
 const sortedCheckpointVersions = sort(checkpointVersions)
 
-export const version = "0.0.27"
+export const version = "0.0.28"
 
 export function isVersionBetween(v: string, start: string, end: string) {
 	const vCleaned = clean(v)
diff --git a/packages/extension/src/install.ts b/packages/extension/src/install.ts
index 0704f26..4a65756 100644
--- a/packages/extension/src/install.ts
+++ b/packages/extension/src/install.ts
@@ -88,6 +88,11 @@ export async function installTarballUrl(tarballUrl: string, extsDir: string): Pr
 	}
 }
 
+/**
+ * Install dev extension from a local directory
+ * @param extPath Path to the extension directory
+ * @returns
+ */
 export async function installDevExtensionDir(extPath: string): Promise<ExtPackageJsonExtra> {
 	const manifestPath = await path.join(extPath, "package.json")
 	if (!(await fs.exists(manifestPath))) {
diff --git a/packages/extensions/demo-worker-template-ext/.gitignore b/packages/extensions/demo-worker-template-ext/.gitignore
new file mode 100644
index 0000000..dc364a9
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/.gitignore
@@ -0,0 +1,176 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
+extensions_support/
diff --git a/packages/extensions/demo-worker-template-ext/CHANGELOG.md b/packages/extensions/demo-worker-template-ext/CHANGELOG.md
new file mode 100644
index 0000000..f8fbdad
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/CHANGELOG.md
@@ -0,0 +1,8 @@
+# demo-template-extension
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.9
diff --git a/packages/extensions/demo-worker-template-ext/README.md b/packages/extensions/demo-worker-template-ext/README.md
new file mode 100644
index 0000000..eb93d75
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/README.md
@@ -0,0 +1,15 @@
+# tempalte-ext-worker
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.1.20. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
diff --git a/packages/extensions/demo-worker-template-ext/buffer.ts b/packages/extensions/demo-worker-template-ext/buffer.ts
new file mode 100644
index 0000000..4f1715a
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/buffer.ts
@@ -0,0 +1,3 @@
+import Buffer from "node:buffer"
+
+console.log(Buffer)
diff --git a/packages/extensions/demo-worker-template-ext/build.ts b/packages/extensions/demo-worker-template-ext/build.ts
new file mode 100644
index 0000000..d85f263
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/build.ts
@@ -0,0 +1,31 @@
+import { watch } from "fs"
+import { join } from "path"
+import { refreshTemplateWorkerExtension } from "@kksh/api/dev"
+import { $ } from "bun"
+
+async function build() {
+	try {
+		// await $`bun build --minify --target=browser --outdir=./dist ./src/index.ts`
+		const output = await Bun.build({
+			entrypoints: ["./src/index.ts"],
+			outdir: "./dist",
+			minify: true,
+			target: "browser"
+		})
+		console.log(output)
+		await refreshTemplateWorkerExtension()
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+const srcDir = join(import.meta.dir, "src")
+
+await build()
+
+if (Bun.argv.includes("dev")) {
+	console.log(`Watching ${srcDir} for changes...`)
+	watch(srcDir, { recursive: true }, async (event, filename) => {
+		await build()
+	})
+}
diff --git a/packages/extensions/demo-worker-template-ext/deno-src/deno.json b/packages/extensions/demo-worker-template-ext/deno-src/deno.json
new file mode 100644
index 0000000..5861f34
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/deno-src/deno.json
@@ -0,0 +1,5 @@
+{
+	"imports": {
+		"@kunkun/api": "jsr:@kunkun/api@^0.0.14"
+	}
+}
diff --git a/packages/extensions/demo-worker-template-ext/deno-src/deno.lock b/packages/extensions/demo-worker-template-ext/deno-src/deno.lock
new file mode 100644
index 0000000..be78ed3
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/deno-src/deno.lock
@@ -0,0 +1,23 @@
+{
+  "version": "4",
+  "specifiers": {
+    "jsr:@hk/comlink-stdio@~0.1.5": "0.1.5",
+    "jsr:@kunkun/api@^0.0.14": "0.0.14"
+  },
+  "jsr": {
+    "@hk/comlink-stdio@0.1.5": {
+      "integrity": "1fd67d5d53ab4571e745584d66b480b5be402f6ca6b2c9e591230fa1d23f85ee"
+    },
+    "@kunkun/api@0.0.14": {
+      "integrity": "a21a255748164992ca93fc292451677261dffca336922a6bed7eb8703c6e880b",
+      "dependencies": [
+        "jsr:@hk/comlink-stdio"
+      ]
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@kunkun/api@^0.0.14"
+    ]
+  }
+}
diff --git a/packages/extensions/demo-worker-template-ext/deno-src/rpc.ts b/packages/extensions/demo-worker-template-ext/deno-src/rpc.ts
new file mode 100644
index 0000000..0e09884
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/deno-src/rpc.ts
@@ -0,0 +1,13 @@
+import { expose } from "@kunkun/api/runtime/deno"
+
+export interface API {
+	add(a: number, b: number): Promise<number>
+	subtract(a: number, b: number): Promise<number>
+}
+
+// Define your API methods
+export const apiMethods: API = {
+	add: async (a: number, b: number) => a + b,
+	subtract: async (a: number, b: number) => a - b
+}
+expose(apiMethods)
diff --git a/packages/extensions/demo-worker-template-ext/package.json b/packages/extensions/demo-worker-template-ext/package.json
new file mode 100644
index 0000000..68de2ad
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/package.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "../../schema/manifest-json-schema.json",
+  "name": "demo-template-extension",
+  "version": "0.0.3",
+  "type": "module",
+  "kunkun": {
+    "name": "Demo Template Extension",
+    "shortDescription": "Demo Template Extension",
+    "longDescription": "Demo Template Extension",
+    "identifier": "demo-worker-template-ext",
+    "permissions": [
+      "fetch:all",
+      "shell:kill",
+      "security:mac:all",
+      {
+        "permission": "shell:deno:execute",
+        "allow": [
+          {
+            "path": "$EXTENSION/deno-src/deno-script.ts",
+            "env": [
+              "npm_package_config_libvips",
+              "CWD"
+            ],
+            "ffi": "*",
+            "read": [
+              "$DESKTOP"
+            ]
+          },
+          {
+            "path": "$EXTENSION/deno-src/rpc.ts",
+            "ffi": "*"
+          }
+        ]
+      },
+      {
+        "permission": "open:file",
+        "allow": [
+          {
+            "path": "$EXTENSION/src/deno-script.ts"
+          }
+        ]
+      },
+      "shell:stdin-write",
+      {
+        "permission": "shell:execute",
+        "allow": [
+          {
+            "cmd": {
+              "program": "ls",
+              "args": [
+                "-l"
+              ]
+            }
+          },
+          {
+            "cmd": {
+              "program": "bash",
+              "args": [
+                "-c",
+                ".+"
+              ]
+            }
+          },
+          {
+            "cmd": {
+              "program": "deno",
+              "args": [
+                "-A",
+                ".+",
+                ".+"
+              ]
+            }
+          }
+        ]
+      }
+    ],
+    "demoImages": [],
+    "icon": {
+      "type": "iconify",
+      "value": "carbon:demo"
+    },
+    "customUiCmds": [],
+    "templateUiCmds": [
+      {
+        "name": "Demo Worker Template",
+        "main": "dist/index.js",
+        "cmds": []
+      }
+    ]
+  },
+  "scripts": {
+    "dev": "bun build.ts dev",
+    "build": "bun build.ts"
+  },
+  "dependencies": {
+    "@hk/comlink-stdio": "npm:@jsr/hk__comlink-stdio@^0.1.6",
+    "@kksh/api": "workspace:*",
+    "@kunkun/api": "npm:@jsr/kunkun__api@^0.0.13"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/bun": "latest",
+    "rollup-plugin-visualizer": "^5.12.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "./dist",
+    ".gitignore"
+  ]
+}
diff --git a/packages/extensions/demo-worker-template-ext/rollup.config.js b/packages/extensions/demo-worker-template-ext/rollup.config.js
new file mode 100644
index 0000000..640b20b
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/rollup.config.js
@@ -0,0 +1,20 @@
+import { visualizer } from "rollup-plugin-visualizer";
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from "@rollup/plugin-typescript";
+import commonjs from '@rollup/plugin-commonjs';
+
+
+export default {
+  input: "src/index.ts",
+  output: {
+    dir: "dist",
+    format: "esm",
+  },
+  plugins: [
+    typescript(),
+    resolve(),
+    commonjs(),
+    // put it the last one
+    visualizer(),
+  ],
+};
diff --git a/packages/extensions/demo-worker-template-ext/src/index.ts b/packages/extensions/demo-worker-template-ext/src/index.ts
new file mode 100644
index 0000000..60105e1
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/src/index.ts
@@ -0,0 +1,181 @@
+import type { RPCChannel } from "@hk/comlink-stdio/browser"
+import {
+	Action,
+	app,
+	Child,
+	expose,
+	Form,
+	fs,
+	Icon,
+	IconEnum,
+	List,
+	Markdown,
+	open,
+	path,
+	security,
+	shell,
+	toast,
+	ui,
+	WorkerExtension
+} from "@kksh/api/ui/worker"
+import { IconType } from "@kunkun/api/models"
+
+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()
+const allItems: List.Item[] = itemsTitle.map(
+	(title) =>
+		new List.Item({
+			title,
+			value: title,
+			defaultAction: "Item Default Action"
+		})
+)
+
+class ExtensionTemplate extends WorkerExtension {
+	async onBeforeGoBack() {
+		console.log("onBeforeGoBack")
+		// console.log(`Try killing pid: ${this.apiProcess?.pid}`)
+		// await this.apiProcess?.kill()
+		// console.log("apiProcess killed")
+	}
+	async onFormSubmit(value: Record<string, any>): Promise<void> {
+		console.log("Form submitted", value)
+	}
+
+	async onEnterPressedOnSearchBar(): Promise<void> {
+		console.log("Enter pressed on search bar")
+	}
+
+	async load() {
+		// console.log("Check screen capture permission:", await security.mac.checkScreenCapturePermission())
+		// await security.mac.revealSecurityPane("AllFiles")
+		// console.log(await security.mac.verifyFingerprint())
+		ui.setSearchBarPlaceholder("Search for items")
+		ui.showLoadingBar(true)
+		setTimeout(() => {
+			ui.showLoadingBar(false)
+		}, 2000)
+		const { rpcChannel, process } = await shell.createDenoRpcChannel<
+			{},
+			{
+				add(a: number, b: number): Promise<number>
+				subtract(a: number, b: number): Promise<number>
+			}
+		>("$EXTENSION/deno-src/rpc.ts", [], {}, {})
+		const api = rpcChannel.getApi()
+		await api.add(1, 2).then(console.log)
+		await api.subtract(1, 2).then(console.log)
+		await process.kill()
+		const extPath = await path.extensionDir()
+		// console.log("Extension path:", extPath)
+		const tagList = new List.ItemDetailMetadataTagList({
+			title: "Tag List Title",
+			tags: [
+				new List.ItemDetailMetadataTagListItem({
+					text: "red",
+					color: "#ff0000"
+				}),
+				new List.ItemDetailMetadataTagListItem({
+					text: "yellow",
+					color: "#ffff00"
+				})
+			]
+		})
+		const list = new List.List({
+			items: allItems,
+			defaultAction: "Top Default Action",
+			detail: new List.ItemDetail({
+				children: [
+					new List.ItemDetailMetadata([
+						new List.ItemDetailMetadataLabel({
+							title: "Label Title",
+							text: "Label Text"
+						}),
+						new List.ItemDetailMetadataLabel({
+							title: "Label Title",
+							text: "Label Text",
+							icon: new Icon({
+								type: IconType.enum.Iconify,
+								value: "mingcute:appstore-fill"
+							})
+						}),
+						new List.ItemDetailMetadataSeparator(),
+						new List.ItemDetailMetadataLabel({
+							title: "Label Title",
+							text: "Label Text"
+						}),
+						new List.ItemDetailMetadataLink({
+							title: "Link Title",
+							text: "Link Text",
+							url: "https://github.com/huakunshen"
+						}),
+						new List.ItemDetailMetadataLabel({
+							title: "Label Title",
+							text: "Label Text"
+						}),
+						tagList
+					]),
+					new Markdown(`
+# Hello World
+<img src="https://github.com/huakunshen.png" />
+<img src="https://github.com/huakunshen.png" />
+<img src="https://github.com/huakunshen.png" />
+							`)
+				],
+				width: 50
+			}),
+			actions: new Action.ActionPanel({
+				items: [
+					new Action.Action({
+						title: "Action 1",
+						value: "action 1",
+						icon: new Icon({ type: IconType.enum.Iconify, value: "material-symbols:add-reaction" })
+					}),
+					new Action.Action({ title: "Action 2", value: "action 2" }),
+					new Action.Action({ title: "Action 3", value: "action 3" }),
+					new Action.Action({ title: "Action 4", value: "action 4" })
+				]
+			})
+		})
+
+		return ui.render(list)
+	}
+
+	async onSearchTermChange(term: string): Promise<void> {
+		return ui.render(
+			new List.List({
+				// items: allItems.filter((item) => item.title.toLowerCase().includes(term.toLowerCase())),
+				inherits: ["items", "sections"],
+				defaultAction: "Top Default Action",
+				detail: new List.ItemDetail({
+					children: [
+						new List.ItemDetailMetadata([
+							new List.ItemDetailMetadataLabel({
+								title: "Label Title",
+								text: "Label Text"
+							})
+						])
+						// 						new Markdown(`
+						// ## Search results for "${term}"
+						// <img src="https://github.com/huakunshen.png" />
+						// <img src="https://github.com/huakunshen.png" />
+						// <img src="https://github.com/huakunshen.png" />
+						// 						`)
+					],
+					width: term.length > 3 ? 70 : 30
+				})
+			})
+		)
+	}
+
+	async onListItemSelected(value: string): Promise<void> {
+		console.log("Item selected:", value)
+	}
+
+	async onActionSelected(value: string): Promise<void> {
+		console.log("Action selected:", value)
+	}
+}
+
+expose(new ExtensionTemplate())
diff --git a/packages/extensions/demo-worker-template-ext/tsconfig.json b/packages/extensions/demo-worker-template-ext/tsconfig.json
new file mode 100644
index 0000000..49ca356
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
\ No newline at end of file
diff --git a/packages/extensions/form-view/.gitignore b/packages/extensions/form-view/.gitignore
new file mode 100644
index 0000000..8c67a06
--- /dev/null
+++ b/packages/extensions/form-view/.gitignore
@@ -0,0 +1,177 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
+extensions_support/
+
diff --git a/packages/extensions/form-view/README.md b/packages/extensions/form-view/README.md
new file mode 100644
index 0000000..e1c7cc7
--- /dev/null
+++ b/packages/extensions/form-view/README.md
@@ -0,0 +1,125 @@
+# Kunkun Template UI Extension
+
+This is a template for a template UI extension. (UI follows pre-defined template)
+
+[./src/index.ts](./src/index.ts) is the default entrypoint for the extension. You can import any other files in this file, but the build process will bundle them into a single file.
+
+## Pros and Cons
+
+This type of extension is suitable for simple use cases, such as a list or form. All components are pre-defined, so there is not much room for customization. If you want more flexibility on the UI, consider using [Custom UI Extension](https://docs.kunkun.sh/extensions/custom-ui-ext/), which requires some frontend knowledge but gives you full control over the UI.
+
+Read documentation at https://docs.kunkun.sh/extensions/worker-template/
+
+Make sure you understand what this type of extension is capable of.
+
+### Pros
+
+- Simple to develop, no need for any frontend knowledge.
+- Small bundle size (~40KB)
+  - [Custom UI Extension](https://docs.kunkun.sh/extensions/custom-ui-ext/) are usually larger than 300KB.
+
+### Cons
+
+- Limited UI customization. Not suitable for complex use cases.
+
+Consider [Custom UI Extension](https://docs.kunkun.sh/extensions/custom-ui-ext/) if you need more complex UI.
+
+## Development
+
+```bash
+pnpm install
+```
+
+Start extension in development mode. Every save will trigger a hot reload in Kunkun.
+
+```bash
+pnpm dev
+```
+
+- During development, right click in Kunkun to open the developer tools.
+  - Error messages will be shown in the console.
+  - If you got any permission error while calling Kunknu's APIs, make sure you've declared the permission in `package.json`. Then go back to home page and enter the extension again to re-apply the permission.
+- To develop and preview the extension in Kunkun, you need to run the `Add Dev Extension` command in Kunkun, and register this extension's path.
+
+Build the extension. Your extension source code can contain many files, but the build process will bundle them into a single file.
+
+```bash
+pnpm build
+# Due to Bun's bug, if you are on windows, and install dependencies with pnpm, you may get error during build.
+# Try install dependencies with bun or npm instead.
+```
+
+## i18n
+
+[./src/i18n](./src/i18n/) contains optional internationalization support starter code.
+
+If you want to support i18n, you can use the `t` function to translate the strings in the extension.
+
+User's language setting is available via `app.language()`.
+
+```ts
+import { app } from "@kksh/api/ui/worker"
+import { setupI18n, t } from "./src/i18n"
+
+setupI18n("zh")
+console.log(t("welcome"))
+
+setupI18n(await app.language())
+console.log(t("welcome"))
+```
+
+## Add More Commands
+
+If you want to add more template worker extension commands, simply modify the `entrypoints` array in [./build.ts](./build.ts).
+
+Then in `package.json`, register the new command.
+
+## Verify Build and Publish
+
+```bash
+pnpm build # make sure the build npm script works
+npx kksh@latest verify # Verify some basic settings
+npx kksh@latest verify --publish # Verify some basic settings before publishing
+```
+
+It is recommended to build the extension with the same environment our CI uses.
+
+The docker image used by our CI is `huakunshen/kunkun-ext-builder:latest`.
+
+You can use the following command to build the extension with the same environment our CI uses.
+This requires you to have docker installed, and the shell you are using has access to it via `docker` command.
+
+```bash
+npx kksh@latest build # Build the extension with
+```
+
+`pnpm` is used to install dependencies and build the extension.
+
+The docker image environment also has `node`, `pnpm`, `npm`, `bun`, `deno` installed.
+If your build failed, try debug with `huakunshen/kunkun-ext-builder:latest` image in interative mode and bind your extension volume to `/workspace`.
+
+After build successfully, you should find a tarball file ends with `.tgz` in the root of your extension.
+The tarball is packaged with `npm pack` command. You can uncompress it to see if it contains all the necessary files.
+
+This tarball is the final product that will be published and installed in Kunkun. You can further verify your extension by installing this tarball directly in Kunkun.
+
+After verifying the tarball, it's ready to be published.
+
+Fork [KunkunExtensions](https://github.com/kunkunsh/KunkunExtensions) repo, add your extension to the `extensions` directory, and create a PR.
+
+Once CI passed and PR merged, you can use your extension in Kunkun.
+
+## Potential Error
+
+Our CI uses `pnpm` to install dependencies. If you are on Windows, you may get error during build.
+
+See issue https://github.com/kunkunsh/kunkun/issues/78
+
+`bun` had problem building the extension when `pnpm` is used to install dependencies.
+
+### Options
+
+1. Install an older version of `bun` (1.1.27 should work)
+2. Install dependencies with `bun` or `npm` instead of `pnpm`
+
+Our CI always builds the extension with on Linux and shouldn't have this problem.
diff --git a/packages/extensions/form-view/build.ts b/packages/extensions/form-view/build.ts
new file mode 100644
index 0000000..a99deb5
--- /dev/null
+++ b/packages/extensions/form-view/build.ts
@@ -0,0 +1,30 @@
+import { watch } from "fs"
+import { join } from "path"
+import { refreshTemplateWorkerExtension } from "@kksh/api/dev"
+import { $ } from "bun"
+
+const entrypoints = ["./src/index.ts"]
+
+async function build() {
+	try {
+		for (const entrypoint of entrypoints) {
+			await $`bun build --minify --target=browser --outdir=./dist ${entrypoint}`
+		}
+		if (Bun.argv.includes("dev")) {
+			await refreshTemplateWorkerExtension()
+		}
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+const srcDir = join(import.meta.dir, "src")
+
+await build()
+
+if (Bun.argv.includes("dev")) {
+	console.log(`Watching ${srcDir} for changes...`)
+	watch(srcDir, { recursive: true }, async (event, filename) => {
+		await build()
+	})
+}
diff --git a/packages/extensions/form-view/package.json b/packages/extensions/form-view/package.json
new file mode 100644
index 0000000..d31bc05
--- /dev/null
+++ b/packages/extensions/form-view/package.json
@@ -0,0 +1,47 @@
+{
+	"$schema": "https://schema.kunkun.sh",
+	"name": "form-view",
+	"version": "0.0.2",
+	"type": "module",
+	"kunkun": {
+		"name": "Form View",
+		"shortDescription": "A Worker Extension Template",
+		"longDescription": "A Worker Extension Template",
+		"identifier": "form-view",
+		"permissions": [
+			"fetch:all",
+			"clipboard:read-all"
+		],
+		"demoImages": [],
+		"icon": {
+			"type": "iconify",
+			"value": "fluent:form-multiple-28-filled"
+		},
+		"customUiCmds": [],
+		"templateUiCmds": [
+			{
+				"name": "Dev Form View",
+				"main": "dist/index.js",
+				"cmds": []
+			}
+		]
+	},
+	"scripts": {
+		"dev": "bun build.ts dev",
+		"build": "bun build.ts"
+	},
+	"dependencies": {
+		"@kksh/api": "workspace:*",
+		"i18next": "^23.15.1"
+	},
+	"devDependencies": {
+		"@types/bun": "latest"
+	},
+	"peerDependencies": {
+		"typescript": "^5.0.0"
+	},
+	"files": [
+		"./dist",
+		".gitignore"
+	]
+}
diff --git a/packages/extensions/form-view/src/i18n/en.ts b/packages/extensions/form-view/src/i18n/en.ts
new file mode 100644
index 0000000..331e9f1
--- /dev/null
+++ b/packages/extensions/form-view/src/i18n/en.ts
@@ -0,0 +1,5 @@
+const en = {
+	welcome: "Welcome to Kunkun"
+}
+export default en
+export type Translation = typeof en
diff --git a/packages/extensions/form-view/src/i18n/index.ts b/packages/extensions/form-view/src/i18n/index.ts
new file mode 100644
index 0000000..2f0e1c8
--- /dev/null
+++ b/packages/extensions/form-view/src/i18n/index.ts
@@ -0,0 +1,20 @@
+import i18next from "i18next"
+import en, { type Translation } from "./en"
+import zh from "./zh"
+
+export function setupI18n(language: "en" | "zh" = "en") {
+	i18next.init({
+		resources: {
+			en: {
+				translation: en
+			},
+			zh: {
+				translation: zh
+			}
+		},
+		lng: language, // default language
+		fallbackLng: "en"
+	})
+}
+
+export const t = (key: keyof Translation, options?: any) => i18next.t(key, options)
diff --git a/packages/extensions/form-view/src/i18n/zh.ts b/packages/extensions/form-view/src/i18n/zh.ts
new file mode 100644
index 0000000..dc3ab95
--- /dev/null
+++ b/packages/extensions/form-view/src/i18n/zh.ts
@@ -0,0 +1,5 @@
+import type { Translation } from "./en"
+
+export default {
+	welcome: "欢迎来到Kunkun"
+} satisfies Translation
diff --git a/packages/extensions/form-view/src/index.ts b/packages/extensions/form-view/src/index.ts
new file mode 100644
index 0000000..f6b4d2c
--- /dev/null
+++ b/packages/extensions/form-view/src/index.ts
@@ -0,0 +1,95 @@
+import {
+	Action,
+	app,
+	expose,
+	Form,
+	fs,
+	Icon,
+	IconEnum,
+	List,
+	Markdown,
+	path,
+	shell,
+	toast,
+	ui,
+	WorkerExtension
+} from "@kksh/api/ui/worker"
+
+class ExtensionTemplate extends WorkerExtension {
+	async onFormSubmit(value: Record<string, any>): Promise<void> {
+		console.log("Form submitted", value)
+		toast.success(`Form submitted: ${JSON.stringify(value)}`)
+	}
+	async load() {
+		const markdown = new Markdown(`# Hello World
+<img src="https://github.com/huakunshen.png" />`)
+		// markdown.toModel
+		return ui.render(markdown)
+		const form = new Form.Form({
+			title: "Form 1",
+			key: "form1",
+			submitBtnText: "Download",
+			fields: [
+				new Form.DateField({
+					key: "birthday",
+					label: "Date of Birth",
+					hideLabel: false,
+					description: "Enter your date of birth"
+				}),
+				new Form.NumberField({
+					key: "age",
+					label: "Age",
+					default: 18,
+					placeholder: "Enter your age",
+					optional: true,
+					description: "Enter your age"
+				}),
+				new Form.InputField({
+					key: "name",
+					label: "Name",
+					default: "Huakun"
+				}),
+				new Form.InputField({
+					key: "name2",
+					label: "Name 2"
+				}),
+				new Form.BooleanField({
+					key: "isActive",
+					label: "Is Active",
+					description: "Is the user active?"
+				}),
+				new Form.SelectField({
+					key: "gender",
+					label: "Gender",
+					options: ["Male", "Female", "Other"],
+					description: "Select your gender"
+				})
+			]
+		})
+		console.log(form)
+		console.log(form.toModel())
+		return ui.render(form)
+	}
+
+	async onActionSelected(actionValue: string): Promise<void> {
+		switch (actionValue) {
+			case "open":
+				break
+
+			default:
+				break
+		}
+	}
+
+	onSearchTermChange(term: string): Promise<void> {
+		console.log("Search term changed to:", term)
+		return Promise.resolve()
+	}
+
+	onListItemSelected(value: string): Promise<void> {
+		console.log("Item selected:", value)
+		return Promise.resolve()
+	}
+}
+
+expose(new ExtensionTemplate())
diff --git a/packages/extensions/form-view/tsconfig.json b/packages/extensions/form-view/tsconfig.json
new file mode 100644
index 0000000..49ca356
--- /dev/null
+++ b/packages/extensions/form-view/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
\ No newline at end of file
diff --git a/packages/types/src/appState.ts b/packages/types/src/appState.ts
index dd9c9f4..4a0539c 100644
--- a/packages/types/src/appState.ts
+++ b/packages/types/src/appState.ts
@@ -1,4 +1,9 @@
+import { Action as ActionSchema } from "@kksh/api/models"
+
 export interface AppState {
 	searchTerm: string
 	highlightedCmd: string
+	loadingBar: boolean
+	defaultAction: string
+	actionPanel?: ActionSchema.ActionPanel
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1f37855..2a6149b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -34,11 +34,11 @@
 		"lint": "eslint ."
 	},
 	"devDependencies": {
+		"@iconify/svelte": "^4.0.2",
 		"@kksh/api": "workspace:*",
 		"@kksh/svelte5": "^0.1.2-beta.8",
 		"@types/bun": "latest",
 		"bits-ui": "1.0.0-next.45",
-		"@iconify/svelte": "^4.0.2",
 		"clsx": "^2.1.1",
 		"formsnap": "2.0.0-next.1",
 		"lucide-svelte": "^0.454.0",
@@ -56,7 +56,9 @@
 	},
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.2",
+		"@internationalized/date": "^3.5.6",
 		"@std/semver": "npm:@jsr/std__semver@^1.0.3",
-		"gsap": "^3.12.5"
+		"gsap": "^3.12.5",
+		"svelte-markdown": "^0.4.1"
 	}
 }
diff --git a/packages/ui/src/components/common/IconSelectorDialog.svelte b/packages/ui/src/components/common/IconSelectorDialog.svelte
index 1ba464d..b6d537c 100644
--- a/packages/ui/src/components/common/IconSelectorDialog.svelte
+++ b/packages/ui/src/components/common/IconSelectorDialog.svelte
@@ -58,8 +58,6 @@
 			</Select.Content>
 		</Select.Root>
 
-        
-
 		<!-- <div class="grid gap-4 py-4">
 			<div class="grid grid-cols-4 items-center gap-4">
 				<Label for="name" class="text-right">Name</Label>
diff --git a/packages/ui/src/components/common/Kbd.svelte b/packages/ui/src/components/common/Kbd.svelte
new file mode 100644
index 0000000..f2c0b40
--- /dev/null
+++ b/packages/ui/src/components/common/Kbd.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { Snippet } from "svelte"
+
+	let { class: className, children }: { class?: string; children: Snippet } = $props()
+</script>
+
+<kbd
+	class={cn(
+		"text-md bg-muted flex h-5 w-5 min-w-5 items-center justify-center rounded-sm border p-1 font-mono",
+		className
+	)}
+>
+	{@render children()}
+</kbd>
diff --git a/packages/ui/src/components/common/LoadingBar.svelte b/packages/ui/src/components/common/LoadingBar.svelte
new file mode 100644
index 0000000..bb7fa44
--- /dev/null
+++ b/packages/ui/src/components/common/LoadingBar.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { HTMLAttributes } from "svelte/elements"
+
+	const {
+		class: className,
+		color = "white",
+		duration
+	}: { class?: string; color?: string; duration?: number } = $props()
+</script>
+
+<div class={cn("h-0.5 w-full", className)}>
+	<div class="relative h-full overflow-hidden">
+		<div class="loading-bar h-full" style="--color: {color}; --width: 30em"></div>
+	</div>
+</div>
+
+<style>
+	.loading-bar::before {
+		content: "";
+		position: absolute;
+		display: block;
+		width: var(--width);
+		height: 100%;
+		background: linear-gradient(
+			to right,
+			transparent,
+			var(--color) 40%,
+			var(--color) 60%,
+			transparent
+		);
+		opacity: 0.5;
+		animation: moveLoadingBar 2s linear infinite;
+	}
+	@keyframes moveLoadingBar {
+		0% {
+			left: calc(var(--width) * -1 / 2);
+		}
+		50% {
+			left: calc(100% - var(--width) / 2);
+		}
+		100% {
+			left: calc(var(--width) * -1 / 2);
+		}
+	}
+</style>
diff --git a/packages/ui/src/components/common/StrikeSeparator.svelte b/packages/ui/src/components/common/StrikeSeparator.svelte
new file mode 100644
index 0000000..e196b12
--- /dev/null
+++ b/packages/ui/src/components/common/StrikeSeparator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { type Snippet } from "svelte"
+
+	const { class: className, children }: { class?: string; children: Snippet } = $props()
+</script>
+
+<div
+	class={cn(
+		"flex cursor-default select-none items-center justify-center space-x-5 whitespace-nowrap",
+		className
+	)}
+>
+	<span class="w-full">
+		<Separator />
+	</span>
+	{@render children()}
+	<span class="w-full">
+		<Separator />
+	</span>
+</div>
diff --git a/packages/ui/src/components/common/TauriLink.svelte b/packages/ui/src/components/common/TauriLink.svelte
new file mode 100644
index 0000000..a29bf52
--- /dev/null
+++ b/packages/ui/src/components/common/TauriLink.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { Snippet } from "svelte"
+	import type { HTMLAttributes } from "svelte/elements"
+	import { open } from "tauri-plugin-shellx-api"
+
+	const {
+		href,
+		class: className = "",
+		children
+	}: {
+		href: string
+		class?: HTMLAttributes<HTMLAnchorElement>["class"]
+		children: Snippet
+	} = $props()
+
+	function handleClick() {
+		open(href)
+	}
+</script>
+
+<button
+	class={cn(
+		"text-left font-medium text-blue-600 hover:cursor-pointer hover:underline dark:text-blue-500",
+		className
+	)}
+	onclick={handleClick}
+>
+	{@render children?.()}
+</button>
diff --git a/packages/ui/src/components/common/date/DatePicker.svelte b/packages/ui/src/components/common/date/DatePicker.svelte
new file mode 100644
index 0000000..a241c62
--- /dev/null
+++ b/packages/ui/src/components/common/date/DatePicker.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date"
+	import { ButtonModule, Calendar, Popover } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import CalendarIcon from "lucide-svelte/icons/calendar"
+
+	const df = new DateFormatter("en-US", {
+		dateStyle: "long"
+	})
+	let {
+		date = $bindable(),
+		value = $bindable(),
+		class: className
+	}: { date?: DateValue; value?: string; class?: string } = $props()
+	let contentRef = $state<HTMLElement | null>(null)
+	$effect(() => {
+		value = date ? date.toString() : ""
+	})
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class={cn(
+			ButtonModule.buttonVariants({
+				variant: "outline",
+				class: cn("w-[280px] justify-start text-left font-normal", className)
+			}),
+			!date && "text-muted-foreground"
+		)}
+	>
+		<CalendarIcon class="mr-2 size-4" />
+		{date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date"}
+	</Popover.Trigger>
+	<Popover.Content bind:ref={contentRef} class="w-auto p-0">
+		<Calendar.Calendar type="single" bind:value={date} />
+	</Popover.Content>
+</Popover.Root>
diff --git a/packages/ui/src/components/common/date/DatePickerWithPreset.svelte b/packages/ui/src/components/common/date/DatePickerWithPreset.svelte
new file mode 100644
index 0000000..d82e34b
--- /dev/null
+++ b/packages/ui/src/components/common/date/DatePickerWithPreset.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { DateFormatter, getLocalTimeZone, today, type DateValue } from "@internationalized/date"
+	import { Button, ButtonModule, Calendar, Popover, Select } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import CalendarIcon from "lucide-svelte/icons/calendar"
+
+	const df = new DateFormatter("en-US", {
+		dateStyle: "long"
+	})
+
+	let {
+		date = $bindable(),
+		class: className,
+		value = $bindable()
+	}: { date?: DateValue; class?: string; value?: string } = $props()
+	const valueString = $derived(date ? df.format(date.toDate(getLocalTimeZone())) : "")
+	$effect(() => {
+		value = date ? date.toString() : ""
+	})
+	const items = [
+		{ value: 0, label: "Today" },
+		{ value: 1, label: "Tomorrow" },
+		{ value: 3, label: "In 3 days" },
+		{ value: 7, label: "In a week" }
+	]
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class={cn(
+			ButtonModule.buttonVariants({
+				variant: "outline",
+				class: "w-[280px] justify-start text-left font-normal"
+			}),
+			!date && "text-muted-foreground",
+			className
+		)}
+	>
+		<CalendarIcon class="mr-2 size-4" />
+		{date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date"}
+	</Popover.Trigger>
+	<Popover.Content class="flex w-auto flex-col space-y-2 p-2">
+		<Select.Root
+			type="single"
+			value={valueString}
+			controlledValue
+			onValueChange={(v) => {
+				if (!v) return
+				date = today(getLocalTimeZone()).add({ days: Number.parseInt(v) })
+			}}
+		>
+			<Select.Trigger>
+				{valueString}
+			</Select.Trigger>
+			<Select.Content>
+				{#each items as item}
+					<Select.Item value={`${item.value}`}>{item.label}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+		<div class="rounded-md border">
+			<Calendar.Calendar type="single" bind:value={date} />
+		</div>
+	</Popover.Content>
+</Popover.Root>
diff --git a/packages/ui/src/components/common/date/index.ts b/packages/ui/src/components/common/date/index.ts
new file mode 100644
index 0000000..70afd82
--- /dev/null
+++ b/packages/ui/src/components/common/date/index.ts
@@ -0,0 +1,2 @@
+export { default as DatePicker } from "./DatePicker.svelte"
+export { default as DatePickerWithPreset } from "./DatePickerWithPreset.svelte"
diff --git a/packages/ui/src/components/common/index.ts b/packages/ui/src/components/common/index.ts
index 1fc5ff2..92920a6 100644
--- a/packages/ui/src/components/common/index.ts
+++ b/packages/ui/src/components/common/index.ts
@@ -1,2 +1,5 @@
 export { default as IconMultiplexer } from "./IconMultiplexer.svelte"
 export { default as IconSelector } from "./IconSelector.svelte"
+export { default as StrikeSeparator } from "./StrikeSeparator.svelte"
+export { default as LoadingBar } from "./LoadingBar.svelte"
+export * from "./date"
diff --git a/packages/ui/src/components/extension/index.ts b/packages/ui/src/components/extension/index.ts
index 5e813b7..6a2b402 100644
--- a/packages/ui/src/components/extension/index.ts
+++ b/packages/ui/src/components/extension/index.ts
@@ -1,3 +1,4 @@
 export { default as ExtListItem } from "./ExtListItem.svelte"
 export { default as StoreExtDetail } from "./StoreExtDetail.svelte"
 export { default as PermissionInspector } from "./PermissionInspector.svelte"
+export * as Templates from "./templates"
diff --git a/packages/ui/src/components/extension/templates/Markdown.svelte b/packages/ui/src/components/extension/templates/Markdown.svelte
new file mode 100644
index 0000000..29c09a7
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/Markdown.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import SvelteMarkdown from "svelte-markdown"
+
+	const { markdown, class: className }: { markdown: string; class?: string } = $props()
+</script>
+
+<div class={cn("prose dark:prose-invert", className)}>
+	<SvelteMarkdown source={markdown} />
+</div>
diff --git a/packages/ui/src/components/extension/templates/MarkdownView.svelte b/packages/ui/src/components/extension/templates/MarkdownView.svelte
new file mode 100644
index 0000000..1b758a5
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/MarkdownView.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { MarkdownSchema } from "@kksh/api/ui/worker"
+	import { Button } from "@kksh/svelte5"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import Markdown from "./Markdown.svelte"
+
+	const {
+		markdownViewContent,
+		onGoBack
+	}: {
+		markdownViewContent: MarkdownSchema
+		onGoBack?: () => void
+	} = $props()
+</script>
+
+<svelte:window
+	on:keydown={(e) => {
+		if (e.key === "Escape") {
+			onGoBack?.()
+		}
+	}}
+/>
+<Button class="fixed left-2 top-2" onclick={onGoBack} variant="outline" size="icon">
+	<ArrowLeftIcon />
+</Button>
+<main class="container my-5">
+	<Markdown markdown={markdownViewContent.content} />
+</main>
diff --git a/packages/ui/src/components/extension/templates/form-view.svelte b/packages/ui/src/components/extension/templates/form-view.svelte
new file mode 100644
index 0000000..431d1b0
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/form-view.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { FormNodeNameEnum, FormSchema } from "@kksh/api/ui/worker"
+	import { Button } from "@kksh/svelte5"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import Form from "./form.svelte"
+
+	let { formViewContent, onGoBack }: { formViewContent: FormSchema.Form; onGoBack: () => void } =
+		$props()
+</script>
+
+<div data-tauri-drag-region class="h-12 w-full"></div>
+<Button class="fixed left-2 top-2" size="icon" variant="outline" onclick={onGoBack}>
+	<ArrowLeftIcon />
+</Button>
+<main class="container flex flex-col gap-2 pb-4">
+	<h1 class="text-2xl font-bold">{formViewContent.title}</h1>
+	<Form {formViewContent} />
+</main>
+<!-- <pre>{JSON.stringify(formViewContent, null, 2)}</pre> -->
diff --git a/packages/ui/src/components/extension/templates/form.svelte b/packages/ui/src/components/extension/templates/form.svelte
new file mode 100644
index 0000000..7dbb913
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/form.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { DateValue } from "@internationalized/date"
+	import { FormNodeNameEnum, FormSchema } from "@kksh/api/ui/worker"
+	import { Button, Checkbox, Form, Input, Label, Select } from "@kksh/svelte5"
+	import { DatePickerWithPreset, Shiki } from "@kksh/ui"
+	import { buildFormSchema, cn } from "@kksh/ui/utils"
+	import { onMount } from "svelte"
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
+	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
+	import * as v from "valibot"
+	import DatePicker from "../../common/date/DatePicker.svelte"
+	import TauriLink from "../../common/TauriLink.svelte"
+
+	let {
+		formViewContent,
+		class: className,
+		onSubmit
+	}: {
+		formViewContent: FormSchema.Form
+		class?: string
+		onSubmit?: (formData: Record<string, any>) => void
+	} = $props()
+	const formSchema = $derived(buildFormSchema(formViewContent))
+	onMount(() => {
+		console.log(formSchema)
+	})
+	const form = $derived(
+		superForm(defaults(valibot(formSchema)), {
+			validators: valibotClient(formSchema),
+			SPA: true,
+			onUpdate({ form, cancel }) {
+				cancel()
+				console.log($formData)
+				if (!form.valid) return
+				const parsedData = v.parse(formSchema, $formData)
+				console.log(parsedData)
+				onSubmit?.(parsedData)
+			}
+		})
+	)
+	const { form: formData, enhance, errors } = $derived(form)
+</script>
+
+{#snippet error(messages?: string[])}
+	{#if messages}
+		<ul>
+			{#each messages as message}
+				<li><small class="text-red-500">{message}</small></li>
+			{/each}
+		</ul>
+	{/if}
+{/snippet}
+{#key formViewContent}
+	<form class={cn("flex flex-col gap-2", className)} use:enhance>
+		{#each formViewContent.fields as field}
+			{@const _field = field as FormSchema.BaseField}
+			{#if _field.label && !_field.hideLabel}
+				<Label class="select-none" for={field.key}>{_field.label}</Label>
+			{/if}
+			{#if field.nodeName === FormNodeNameEnum.Number}
+				{@const field2 = field as FormSchema.NumberField}
+				<Input
+					type="number"
+					name={field.key}
+					bind:value={$formData[field.key]}
+					placeholder={field2.placeholder}
+				/>
+			{:else if field.nodeName === FormNodeNameEnum.Input}
+				{@const field2 = field as FormSchema.InputField}
+				<Input
+					type="text"
+					name={field2.key}
+					bind:value={$formData[field2.key]}
+					placeholder={field2.placeholder}
+				/>
+			{:else if field.nodeName === FormNodeNameEnum.Date}
+				{@const field2 = field as FormSchema.DateField}
+				<DatePickerWithPreset class="w-full" bind:value={$formData[field2.key]} />
+			{:else if field.nodeName === FormNodeNameEnum.Select}
+				{@const field2 = field as FormSchema.SelectField}
+				<Select.Root type="single" name="favoriteFruit" bind:value={$formData[field2.key]}>
+					<Select.Trigger class="w-80">
+						{$formData[field2.key] ? $formData[field2.key] : "Select"}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Group>
+							<!-- <Select.GroupHeading>Fruits</Select.GroupHeading> -->
+							{#each field2.options as option}
+								<Select.Item value={option} label={option}>{option}</Select.Item>
+							{/each}
+						</Select.Group>
+					</Select.Content>
+				</Select.Root>
+			{:else if field.nodeName === FormNodeNameEnum.Array}
+				<span>
+					Array is not supported yet
+					<TauriLink href="https://github.com/kunkunsh/kunkun/issues/19"
+						>Tracked at https://github.com/kunkunsh/kunkun/issues/19</TauriLink
+					>
+				</span>
+			{:else if field.nodeName === FormNodeNameEnum.Form}
+				<span>
+					Nested Form is not supported yet
+					<TauriLink href="https://github.com/kunkunsh/kunkun/issues/19"
+						>Tracked at https://github.com/kunkunsh/kunkun/issues/19</TauriLink
+					>
+				</span>
+			{:else if field.nodeName === FormNodeNameEnum.Boolean}
+				{@const field2 = field as FormSchema.InputField}
+				<div class="flex items-center space-x-2">
+					<Checkbox name={field2.key} bind:checked={$formData[field2.key]} />
+					<Label
+						id="terms-label"
+						for={field2.key}
+						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+					>
+						{field2.description}
+					</Label>
+				</div>
+			{:else}
+				<span>
+					{field.nodeName} is not supported yet
+					<TauriLink href="https://github.com/kunkunsh/kunkun/issues/19"
+						>Tracked at https://github.com/kunkunsh/kunkun/issues/19</TauriLink
+					>
+				</span>
+			{/if}
+			{#if field.description}
+				<p class="text-muted-foreground select-none text-sm">{field.description}</p>
+			{/if}
+			{@render error($errors[field.key] as string[] | undefined)}
+		{/each}
+		<Button type="submit">{formViewContent.submitBtnText ?? "Submit"}</Button>
+	</form>
+{/key}
+<!-- <SuperDebug data={$formData} /> -->
diff --git a/packages/ui/src/components/extension/templates/index.ts b/packages/ui/src/components/extension/templates/index.ts
new file mode 100644
index 0000000..cce64b1
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/index.ts
@@ -0,0 +1,3 @@
+export { default as ListView } from "./list-view.svelte"
+export { default as FormView } from "./form-view.svelte"
+export { default as MarkdownView } from "./MarkdownView.svelte"
diff --git a/packages/ui/src/components/extension/templates/list-detail.svelte b/packages/ui/src/components/extension/templates/list-detail.svelte
new file mode 100644
index 0000000..11e3c89
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/list-detail.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ListSchema, MarkdownSchema, NodeNameEnum } from "@kksh/api/ui/worker"
+	import Markdown from "./Markdown.svelte"
+	import Metadata from "./metadata/Metadata.svelte"
+
+	const { detail }: { detail: ListSchema.ItemDetail } = $props()
+</script>
+
+<div class="h-full overflow-auto">
+	{#each detail.children as child}
+		{#if child.nodeName === NodeNameEnum.Markdown}
+			<Markdown markdown={(child as MarkdownSchema).content} />
+		{:else if child.nodeName === NodeNameEnum.ListItemDetailMetadata}
+			<Metadata items={(child as ListSchema.ItemDetailMetadata).items} />
+		{:else}
+			<div>Unhandled Component</div>
+		{/if}
+	{/each}
+</div>
diff --git a/packages/ui/src/components/extension/templates/list-item.svelte b/packages/ui/src/components/extension/templates/list-item.svelte
new file mode 100644
index 0000000..07e885f
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/list-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { List, ListSchema, WorkerExtension } from "@kksh/api/ui/worker"
+	import { Command } from "@kksh/svelte5"
+	import { IconMultiplexer } from "../../common"
+
+	let { item, onSelect }: { item: ListSchema.Item; onSelect?: () => void } = $props()
+</script>
+
+<Command.Item class="gap-2" {onSelect} value={JSON.stringify(item)}>
+	{#if item.icon}
+		<IconMultiplexer icon={item.icon} class="h-5 w-5" />
+	{/if}
+	<span class="truncate">{item.title}</span>
+	<span class="text-muted-foreground">{item.subTitle}</span>
+	<Command.Shortcut>
+		<div class="flex gap-2">
+			{#each item.accessories ?? [] as acc}
+				<span class="flex items-center gap-1">
+					{#if acc.icon}
+						<IconMultiplexer icon={acc.icon} class="h-4 w-4" />
+					{/if}
+					<span>{acc.text}</span>
+				</span>
+			{/each}
+		</div>
+	</Command.Shortcut>
+</Command.Item>
diff --git a/packages/ui/src/components/extension/templates/list-view.svelte b/packages/ui/src/components/extension/templates/list-view.svelte
new file mode 100644
index 0000000..e6eee25
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/list-view.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { ListSchema } from "@kksh/api/ui/worker"
+	import { Button, Command, Progress, Resizable } from "@kksh/svelte5"
+	import { CustomCommandInput } from "@kksh/ui/main"
+	import { commandScore } from "@kksh/ui/utils"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { type PaneAPI } from "paneforge"
+	import { onMount, type Snippet } from "svelte"
+	import { StrikeSeparator } from "../../common"
+	import ListDetail from "./list-detail.svelte"
+	import ListItem from "./list-item.svelte"
+
+	let {
+		searchTerm = $bindable(""),
+		searchBarPlaceholder = $bindable(""),
+		pbar,
+		onGoBack,
+		onListScrolledToBottom,
+		onEnterKeyPressed,
+		onListItemSelected,
+		onSearchTermChange,
+		footer,
+		onHighlightedItemChanged,
+		loading,
+		listViewContent
+	}: {
+		searchTerm: string
+		searchBarPlaceholder: string
+		pbar: number | null
+		onGoBack?: () => void
+		onListScrolledToBottom?: () => void
+		onEnterKeyPressed?: () => void
+		onListItemSelected?: (value: string) => void
+		onSearchTermChange?: (searchTerm: string) => void
+		onHighlightedItemChanged?: (value: string) => void
+		footer: Snippet
+		loading: boolean
+		listViewContent: ListSchema.List
+	} = $props()
+	let mounted = $state(false)
+	let leftPane: PaneAPI | undefined
+	let rightPane: PaneAPI | undefined
+	let isScrolling = $state(false)
+	let highlightedValue = $state<string>("")
+	let privateSearchTerm = $state("")
+	// let detailWidth = $derived()
+	let prevDetailWidth = $state(0)
+
+	const detailWidth = $derived(listViewContent.detail ? (listViewContent.detail?.width ?? 70) : 0)
+
+	$effect(() => {
+		onHighlightedItemChanged?.(highlightedValue)
+	})
+
+	$effect(() => {
+		onSearchTermChange?.(searchTerm)
+	})
+
+	function onScroll(e: Event) {
+		const element = e.target as HTMLElement
+		if (!isScrolling && element?.scrollHeight - element?.scrollTop === element?.clientHeight) {
+			isScrolling = true
+			onListScrolledToBottom?.()
+			setTimeout(() => {
+				isScrolling = false
+			}, 500)
+		}
+	}
+
+	$effect(() => {
+		if (detailWidth != prevDetailWidth) {
+			// this watches width update from extension, when pane is resized manually, this will not trigger
+			prevDetailWidth = detailWidth
+			rightPane?.resize(detailWidth)
+		}
+	})
+</script>
+
+<Command.Root
+	class="h-screen w-full rounded-lg border shadow-md"
+	shouldFilter={listViewContent.filter !== "none"}
+	bind:value={highlightedValue}
+	filter={(value, search, keywords) => {
+		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)
+		)
+	}}
+>
+	<CustomCommandInput
+		bind:value={searchTerm}
+		placeholder={searchBarPlaceholder}
+		autofocus
+		onkeydown={(e) => {
+			if (e.key === "Enter") {
+				e.preventDefault()
+				onEnterKeyPressed?.()
+			} else if (e.key === "Escape") {
+				e.preventDefault()
+				if (searchTerm.length > 0) {
+					searchTerm = ""
+				} else {
+					onGoBack?.()
+				}
+			}
+		}}
+	>
+		{#snippet leftSlot()}
+			<Button variant="outline" size="icon" onclick={onGoBack}>
+				<ArrowLeftIcon class="h-4 w-4" />
+			</Button>
+		{/snippet}
+	</CustomCommandInput>
+	{#if pbar}
+		<Progress value={50} class="h-0.4 rounded-none" />
+	{/if}
+
+	<Resizable.PaneGroup direction="horizontal">
+		<Resizable.Pane bind:this={leftPane}>
+			<Command.List class="h-full max-h-screen" onscroll={onScroll}>
+				<Command.Empty>No results found.</Command.Empty>
+				{#each listViewContent.sections || [] as section}
+					<Command.Group heading={section.title}>
+						{#each section.items as item}
+							<ListItem {item} />
+						{/each}
+					</Command.Group>
+				{/each}
+				{#each listViewContent.items || [] as item}
+					<ListItem
+						{item}
+						onSelect={() => {
+							onListItemSelected?.(item.value)
+						}}
+					/>
+				{/each}
+				{#if loading}
+					<StrikeSeparator class="h-20">
+						<span>Loading</span>
+					</StrikeSeparator>
+				{/if}
+			</Command.List>
+		</Resizable.Pane>
+		<Resizable.Handle withHandle />
+		<Resizable.Pane defaultSize={detailWidth} bind:this={rightPane}>
+			{#if listViewContent.detail}
+				<ListDetail detail={listViewContent.detail} />
+			{/if}
+		</Resizable.Pane>
+	</Resizable.PaneGroup>
+	{@render footer?.()}
+</Command.Root>
diff --git a/packages/ui/src/components/extension/templates/metadata/Metadata.svelte b/packages/ui/src/components/extension/templates/metadata/Metadata.svelte
new file mode 100644
index 0000000..aa59477
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/Metadata.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import {
+		List,
+		ListSchema,
+		MarkdownSchema,
+		NodeNameEnum,
+		WorkerExtension
+	} from "@kksh/api/ui/worker"
+	import { Separator } from "@kksh/svelte5"
+	import Label from "./label.svelte"
+	import Link from "./link.svelte"
+	import Tags from "./tags.svelte"
+
+	const { items }: { items: ListSchema.ItemDetailMetadataItem[] } = $props()
+</script>
+
+<div class="px-3">
+	{#each items as item}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataLabel}
+			<Label
+				title={(item as ListSchema.ItemDetailMetadataLabel).title}
+				text={(item as ListSchema.ItemDetailMetadataLabel).text}
+				icon={(item as ListSchema.ItemDetailMetadataLabel).icon}
+			/>
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataSeparator}
+			<Separator />
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataLink}
+			<Link
+				title={(item as ListSchema.ItemDetailMetadataLink).title}
+				text={(item as ListSchema.ItemDetailMetadataLink).text}
+				url={(item as ListSchema.ItemDetailMetadataLink).url}
+			/>
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataTagList}
+			<Tags
+				tags={(item as ListSchema.ItemDetailMetadataTagList).tags}
+				title={(item as ListSchema.ItemDetailMetadataTagList).title}
+			/>
+		{/if}
+	{/each}
+</div>
diff --git a/packages/ui/src/components/extension/templates/metadata/label.svelte b/packages/ui/src/components/extension/templates/metadata/label.svelte
new file mode 100644
index 0000000..e446d67
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/label.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { IconType, List, ListSchema } from "@kksh/api/ui/worker"
+	import { IconMultiplexer } from "../../../common"
+
+	const {
+		title,
+		text,
+		icon
+	}: {
+		title: string
+		text?:
+			| string
+			| {
+					text: string
+					color: string
+			  }
+		icon?: {
+			type: IconType
+			value: string
+		}
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<span class="flex items-center gap-2">
+		{#if icon}
+			<IconMultiplexer {icon} class="h-4 w-4" />
+		{/if}
+		<span class="text-sm">{text}</span>
+	</span>
+</div>
diff --git a/packages/ui/src/components/extension/templates/metadata/link.svelte b/packages/ui/src/components/extension/templates/metadata/link.svelte
new file mode 100644
index 0000000..cfd2fa1
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/link.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Icon from "@iconify/svelte"
+	import TauriLink from "../../../common/TauriLink.svelte"
+
+	const {
+		text,
+		title,
+		url
+	}: {
+		text: string
+		title: string
+		url: string
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<TauriLink href={url} class="flex items-center justify-center gap-1">
+		<span class="text-sm">{text}</span>
+		<Icon icon="gridicons:external" />
+	</TauriLink>
+</div>
diff --git a/packages/ui/src/components/extension/templates/metadata/tag.svelte b/packages/ui/src/components/extension/templates/metadata/tag.svelte
new file mode 100644
index 0000000..5dd1b9e
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/tag.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Color, ListSchema } from "@kksh/api/ui/worker"
+	import { Badge } from "@kksh/svelte5"
+
+	const {
+		text,
+		color
+	}: {
+		text?: string
+		color?: Color
+		// icon?: Icon
+	} = $props()
+</script>
+
+<Badge
+	style={`style: ${color ? color : "var(--muted-foreground)"}; background-color: ${color ? `${color}` : "var(--muted)"};`}
+>
+	{text}
+</Badge>
diff --git a/packages/ui/src/components/extension/templates/metadata/tags.svelte b/packages/ui/src/components/extension/templates/metadata/tags.svelte
new file mode 100644
index 0000000..ff0a641
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/tags.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Color, ListSchema } from "@kksh/api/ui/worker"
+	import Tag from "./tag.svelte"
+
+	const {
+		tags,
+		title
+	}: {
+		tags: Array<{ text?: string; color?: Color }>
+		title: string
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<span class="flex gap-1">
+		{#each tags as tag}
+			<Tag text={tag.text} color={tag.color} />
+		{/each}
+	</span>
+</div>
diff --git a/packages/ui/src/components/main/ActionPanel.svelte b/packages/ui/src/components/main/ActionPanel.svelte
new file mode 100644
index 0000000..c6e3e1e
--- /dev/null
+++ b/packages/ui/src/components/main/ActionPanel.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import Icon from "@iconify/svelte"
+	import { Action as ActionSchema } from "@kksh/api/models"
+	import { Button, ButtonModule, Command, Input, Label, Popover } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { Check, ChevronsUpDown } from "lucide-svelte"
+	import { tick } from "svelte"
+	import Kbd from "../common/Kbd.svelte"
+
+	let {
+		actionPanel,
+		open = $bindable(false),
+		onActionSelected
+	}: {
+		actionPanel?: ActionSchema.ActionPanel
+		open?: boolean
+		onActionSelected?: (value: string) => void
+	} = $props()
+
+	let value = $state("")
+	let triggerRef = $state<HTMLButtonElement>(null!)
+
+	// We want to refocus the trigger button when the user selects
+	// an item from the list so users can continue navigating the
+	// rest of the form with the keyboard.
+	function closeAndFocusTrigger() {
+		open = false
+		tick().then(() => {
+			triggerRef.focus()
+		})
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger bind:ref={triggerRef}>
+		{#snippet child({ props })}
+			<Button variant="ghost" class="" {...props} role="combobox" aria-expanded={open}>
+				Actions
+				<span class="flex items-center gap-0.5" data-tauri-drag-region>
+					<Kbd><Icon icon="ph-command" class="h-4 w-4 shrink-0" /></Kbd>
+					<Kbd>K</Kbd>
+				</span>
+				<ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content class="w-64 p-0">
+		<Command.Root>
+			<Command.Input placeholder="Select an Action" />
+			<Command.List>
+				<Command.Empty>No action found.</Command.Empty>
+				<Command.Group>
+					{#each actionPanel?.items ?? [] as action}
+						<Command.Item
+							value={action.value}
+							onSelect={() => {
+								value = action.value
+								closeAndFocusTrigger()
+								onActionSelected?.(action.value)
+							}}
+						>
+							{action.title}
+						</Command.Item>
+					{/each}
+				</Command.Group>
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>
diff --git a/packages/ui/src/components/main/ExtCmdsGroup.svelte b/packages/ui/src/components/main/ExtCmdsGroup.svelte
index f35dc43..62102c8 100644
--- a/packages/ui/src/components/main/ExtCmdsGroup.svelte
+++ b/packages/ui/src/components/main/ExtCmdsGroup.svelte
@@ -30,7 +30,8 @@
 		}}
 		value={JSON.stringify({
 			cmdName: cmd.name,
-			cmdType: cmd.type
+			cmdType: cmd.type,
+			data: { isDev: heading === "Dev Extensions" }
 		} satisfies CmdValue)}
 	>
 		<span class="flex gap-2">
diff --git a/packages/ui/src/components/main/GlobalCommandPaletteFooter.svelte b/packages/ui/src/components/main/GlobalCommandPaletteFooter.svelte
index a19c341..b8f20c6 100644
--- a/packages/ui/src/components/main/GlobalCommandPaletteFooter.svelte
+++ b/packages/ui/src/components/main/GlobalCommandPaletteFooter.svelte
@@ -1,12 +1,42 @@
 <script lang="ts">
-	import { Avatar } from "@kksh/svelte5"
+	import Icon from "@iconify/svelte"
+	import { Action as ActionSchema } from "@kksh/api/models"
+	import { Avatar, Button } from "@kksh/svelte5"
 	import { cn } from "@kksh/ui/utils"
+	import Kbd from "../common/Kbd.svelte"
+	import ActionPanel from "./ActionPanel.svelte"
 
-	const { class: className }: { class?: string } = $props()
+	const {
+		class: className,
+		defaultAction,
+		actionPanel,
+		onDefaultActionSelected,
+		onActionSelected
+	}: {
+		class?: string
+		defaultAction?: string
+		actionPanel?: ActionSchema.ActionPanel
+		onDefaultActionSelected?: () => void
+		onActionSelected?: (value: string) => void
+	} = $props()
 </script>
 
-<footer data-tauri-drag-region class={cn("h-12 select-none border-t", className)}>
+<flex
+	data-tauri-drag-region
+	class={cn("h-12 select-none items-center justify-between gap-4 border-t px-2", className)}
+>
 	<Avatar.Root class="p-2">
 		<Avatar.Image src="/favicon.png" alt="Kunkun Logo" class="select-none invert dark:invert-0" />
 	</Avatar.Root>
-</footer>
+	<flex class="items-center gap-1">
+		{#if defaultAction}
+			<Button size="default" class="h-full" variant="ghost" onclick={onDefaultActionSelected}>
+				{defaultAction}
+				<Kbd><Icon icon="tdesign:enter" /></Kbd>
+			</Button>
+		{/if}
+		{#if actionPanel}
+			<ActionPanel {actionPanel} {onActionSelected} />
+		{/if}
+	</flex>
+</flex>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 7f286be..462f48c 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -3,6 +3,7 @@ export * from "./components/common"
 export * as Layouts from "./components/layouts/index"
 export * as Error from "./components/error/index"
 export * as Common from "./components/common/index"
+export * from "./components/common/index"
 export * as Custom from "./components/custom"
 export * as Main from "./components/main/index"
 export * as Extension from "./components/extension/index"
diff --git a/apps/desktop/src/lib/utils/command-score.ts b/packages/ui/src/utils/command-score.ts
similarity index 100%
rename from apps/desktop/src/lib/utils/command-score.ts
rename to packages/ui/src/utils/command-score.ts
diff --git a/packages/ui/src/utils/form.ts b/packages/ui/src/utils/form.ts
new file mode 100644
index 0000000..779d7d8
--- /dev/null
+++ b/packages/ui/src/utils/form.ts
@@ -0,0 +1,47 @@
+import { FormNodeNameEnum, type FormSchema } from "@kksh/api/ui/worker"
+import type { BaseIssue, BaseSchema } from "valibot"
+import * as v from "valibot"
+
+function addDefaultToSchema(
+	schema: BaseSchema<unknown, unknown, BaseIssue<unknown>>,
+	field: FormSchema.BaseField
+) {
+	if (field.default) {
+		schema = v.optional(schema, field.default)
+	}
+	return schema
+}
+
+export function buildFormSchema(form: FormSchema.Form): v.ObjectSchema<any, undefined> {
+	let schema = v.object({})
+	for (const field of form.fields) {
+		let fieldSchema: any = undefined
+		if (field.nodeName === FormNodeNameEnum.Input) {
+			fieldSchema = v.string()
+		} else if (field.nodeName === FormNodeNameEnum.Number) {
+			fieldSchema = v.number()
+		} else if (field.nodeName === FormNodeNameEnum.Select) {
+			fieldSchema = v.string()
+			// fieldSchema = v.picklist((field as FormSchema.SelectField).options)
+			// schema = v.object({ ...schema.entries, [field.key]: fieldSchema })
+			// continue
+		} else if (field.nodeName === FormNodeNameEnum.Boolean) {
+			fieldSchema = v.boolean()
+		} else if (field.nodeName === FormNodeNameEnum.Date) {
+			fieldSchema = v.date()
+		} else {
+			console.warn(`Unknown field type: ${field.nodeName}`)
+		}
+		fieldSchema = addDefaultToSchema(fieldSchema, field)
+		if ((field as FormSchema.BaseField).optional) {
+			fieldSchema = v.nullable(v.optional(fieldSchema))
+		}
+		if ((field as FormSchema.BaseField).description) {
+			fieldSchema = v.pipe(fieldSchema, v.description((field as FormSchema.BaseField).description!))
+		}
+		if (fieldSchema) {
+			schema = v.object({ ...schema.entries, [field.key]: fieldSchema })
+		}
+	}
+	return schema
+}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 245e021..0194dfa 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,2 +1,4 @@
 export * from "./tailwind"
 export * from "./format"
+export { commandScore } from "./command-score"
+export * from "./form"
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 35def33..a87d0db 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,4 +1,7 @@
 {
 	"extends": "../typescript-config/base.json",
+	"compilerOptions": {
+		"verbatimModuleSyntax": true
+	},
 	"include": ["src/**/*"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 964d1b1..5caf9ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -117,6 +117,9 @@ importers:
       '@formkit/auto-animate':
         specifier: ^0.8.2
         version: 0.8.2
+      '@huakunshen/comlink':
+        specifier: ^4.4.1
+        version: 4.4.1
       '@kksh/extension':
         specifier: workspace:*
         version: link:../../packages/extension
@@ -202,6 +205,9 @@ importers:
       '@types/semver':
         specifier: ^7.5.8
         version: 7.5.8
+      '@unocss/preset-attributify':
+        specifier: ^0.64.0
+        version: 0.64.0
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
@@ -232,6 +238,9 @@ importers:
       typescript:
         specifier: ^5.6.3
         version: 5.6.3
+      unocss:
+        specifier: ^0.64.0
+        version: 0.64.0(postcss@8.4.47)(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       vaul-svelte:
         specifier: ^0.3.2
         version: 0.3.2(svelte@5.1.9)
@@ -404,6 +413,53 @@ importers:
         specifier: latest
         version: 1.1.13
 
+  packages/extensions/demo-worker-template-ext:
+    dependencies:
+      '@hk/comlink-stdio':
+        specifier: npm:@jsr/hk__comlink-stdio@^0.1.6
+        version: '@jsr/hk__comlink-stdio@0.1.7'
+      '@kksh/api':
+        specifier: workspace:*
+        version: link:../../api
+      '@kunkun/api':
+        specifier: npm:@jsr/kunkun__api@^0.0.13
+        version: '@jsr/kunkun__api@0.0.13(tslib@2.8.1)(typescript@5.6.3)'
+      typescript:
+        specifier: ^5.0.0
+        version: 5.6.3
+    devDependencies:
+      '@rollup/plugin-commonjs':
+        specifier: ^26.0.1
+        version: 26.0.3(rollup@4.24.3)
+      '@rollup/plugin-node-resolve':
+        specifier: ^15.2.3
+        version: 15.3.0(rollup@4.24.3)
+      '@rollup/plugin-typescript':
+        specifier: ^11.1.6
+        version: 11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.6.3)
+      '@types/bun':
+        specifier: latest
+        version: 1.1.13
+      rollup-plugin-visualizer:
+        specifier: ^5.12.0
+        version: 5.12.0(rollup@4.24.3)
+
+  packages/extensions/form-view:
+    dependencies:
+      '@kksh/api':
+        specifier: workspace:*
+        version: link:../../api
+      i18next:
+        specifier: ^23.15.1
+        version: 23.16.5
+      typescript:
+        specifier: ^5.0.0
+        version: 5.6.3
+    devDependencies:
+      '@types/bun':
+        specifier: latest
+        version: 1.1.13
+
   packages/schema:
     dependencies:
       '@aws-sdk/client-s3':
@@ -462,12 +518,18 @@ importers:
       '@formkit/auto-animate':
         specifier: ^0.8.2
         version: 0.8.2
+      '@internationalized/date':
+        specifier: ^3.5.6
+        version: 3.5.6
       '@std/semver':
         specifier: npm:@jsr/std__semver@^1.0.3
         version: '@jsr/std__semver@1.0.3'
       gsap:
         specifier: ^3.12.5
         version: 3.12.5
+      svelte-markdown:
+        specifier: ^0.4.1
+        version: 0.4.1(svelte@5.1.9)
     devDependencies:
       '@iconify/svelte':
         specifier: ^4.0.2
@@ -600,6 +662,12 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@0.4.1':
+    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
+
+  '@antfu/utils@0.7.10':
+    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
+
   '@ark/schema@0.10.0':
     resolution: {integrity: sha512-zpfXwWLOzj9aUK+dXQ6aleJAOgle4/WrHDop5CMX2M88dFQ85NdH8O0v0pvMAQnfFcaQAZ/nVDYLlBJsFc09XA==}
 
@@ -906,6 +974,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.23.1':
+    resolution: {integrity: sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/aix-ppc64@0.24.0':
     resolution: {integrity: sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==}
     engines: {node: '>=18'}
@@ -918,6 +992,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.23.1':
+    resolution: {integrity: sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm64@0.24.0':
     resolution: {integrity: sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==}
     engines: {node: '>=18'}
@@ -930,6 +1010,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.23.1':
+    resolution: {integrity: sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-arm@0.24.0':
     resolution: {integrity: sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==}
     engines: {node: '>=18'}
@@ -942,6 +1028,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.23.1':
+    resolution: {integrity: sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/android-x64@0.24.0':
     resolution: {integrity: sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==}
     engines: {node: '>=18'}
@@ -954,6 +1046,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.23.1':
+    resolution: {integrity: sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-arm64@0.24.0':
     resolution: {integrity: sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==}
     engines: {node: '>=18'}
@@ -966,6 +1064,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.23.1':
+    resolution: {integrity: sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.24.0':
     resolution: {integrity: sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==}
     engines: {node: '>=18'}
@@ -978,6 +1082,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.23.1':
+    resolution: {integrity: sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-arm64@0.24.0':
     resolution: {integrity: sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==}
     engines: {node: '>=18'}
@@ -990,6 +1100,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.23.1':
+    resolution: {integrity: sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.24.0':
     resolution: {integrity: sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==}
     engines: {node: '>=18'}
@@ -1002,6 +1118,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.23.1':
+    resolution: {integrity: sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm64@0.24.0':
     resolution: {integrity: sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==}
     engines: {node: '>=18'}
@@ -1014,6 +1136,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.23.1':
+    resolution: {integrity: sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-arm@0.24.0':
     resolution: {integrity: sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==}
     engines: {node: '>=18'}
@@ -1026,6 +1154,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.23.1':
+    resolution: {integrity: sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.24.0':
     resolution: {integrity: sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==}
     engines: {node: '>=18'}
@@ -1038,6 +1172,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.23.1':
+    resolution: {integrity: sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.24.0':
     resolution: {integrity: sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==}
     engines: {node: '>=18'}
@@ -1050,6 +1190,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.23.1':
+    resolution: {integrity: sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.24.0':
     resolution: {integrity: sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==}
     engines: {node: '>=18'}
@@ -1062,6 +1208,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.23.1':
+    resolution: {integrity: sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.24.0':
     resolution: {integrity: sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==}
     engines: {node: '>=18'}
@@ -1074,6 +1226,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.23.1':
+    resolution: {integrity: sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.24.0':
     resolution: {integrity: sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==}
     engines: {node: '>=18'}
@@ -1086,6 +1244,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.23.1':
+    resolution: {integrity: sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.24.0':
     resolution: {integrity: sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==}
     engines: {node: '>=18'}
@@ -1098,6 +1262,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.23.1':
+    resolution: {integrity: sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/linux-x64@0.24.0':
     resolution: {integrity: sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==}
     engines: {node: '>=18'}
@@ -1110,12 +1280,24 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.23.1':
+    resolution: {integrity: sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.24.0':
     resolution: {integrity: sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/openbsd-arm64@0.23.1':
+    resolution: {integrity: sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-arm64@0.24.0':
     resolution: {integrity: sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==}
     engines: {node: '>=18'}
@@ -1128,6 +1310,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.23.1':
+    resolution: {integrity: sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.24.0':
     resolution: {integrity: sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==}
     engines: {node: '>=18'}
@@ -1140,6 +1328,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.23.1':
+    resolution: {integrity: sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/sunos-x64@0.24.0':
     resolution: {integrity: sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==}
     engines: {node: '>=18'}
@@ -1152,6 +1346,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.23.1':
+    resolution: {integrity: sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-arm64@0.24.0':
     resolution: {integrity: sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==}
     engines: {node: '>=18'}
@@ -1164,6 +1364,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.23.1':
+    resolution: {integrity: sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.24.0':
     resolution: {integrity: sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==}
     engines: {node: '>=18'}
@@ -1176,6 +1382,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.23.1':
+    resolution: {integrity: sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@esbuild/win32-x64@0.24.0':
     resolution: {integrity: sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==}
     engines: {node: '>=18'}
@@ -1262,6 +1474,9 @@ packages:
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
+  '@iconify/utils@2.1.33':
+    resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==}
+
   '@internationalized/date@3.5.6':
     resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==}
 
@@ -1294,6 +1509,12 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@jsr/hk__comlink-stdio@0.1.7':
+    resolution: {integrity: sha512-Jd0V3CwI9ELuklx6pY7lz2bwhy5+aN9EF0eL3pcNzdkglIuRJUvIuVvxonWDQyQ2OedvOJRpivlTfEbpdyeNdw==, tarball: https://npm.jsr.io/~/11/@jsr/hk__comlink-stdio/0.1.7.tgz}
+
+  '@jsr/kunkun__api@0.0.13':
+    resolution: {integrity: sha512-BjV+E9+xyQo2VG6yz45vS7o2dwliyUHnXz60c0ymqthQV5Sk7RsIyuF4v8mOdD8CJ/DbUrx82EMrWHtegntcKQ==, tarball: https://npm.jsr.io/~/11/@jsr/kunkun__api/0.0.13.tgz}
+
   '@jsr/std__semver@1.0.3':
     resolution: {integrity: sha512-d1uBT0Muxhd3yBIw9ZE1Q/4N1Y0td0EJe1AqwM3hP05IMwaWQV/miksQOPR3rup3bVovuIvqBm7WJcoUripdQA==, tarball: https://npm.jsr.io/~/11/@jsr/std__semver/1.0.3.tgz}
 
@@ -1347,6 +1568,24 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-commonjs@26.0.3':
+    resolution: {integrity: sha512-2BJcolt43MY+y5Tz47djHkodCC3c1VKVrBDKpVqHKpQ9z9S158kCCqB8NF6/gzxLdNlYW9abB3Ibh+kOWLp8KQ==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-node-resolve@15.3.0':
+    resolution: {integrity: sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/plugin-typescript@11.1.6':
     resolution: {integrity: sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==}
     engines: {node: '>=14.0.0'}
@@ -1766,6 +2005,9 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
 
+  '@tauri-apps/api@2.0.0-rc.3':
+    resolution: {integrity: sha512-k1erUfnoOFJwL5VNFZz0BQZ2agNstG7CNOjwpdWMl1vOaVuSn4DhJtXB0Deh9lZaaDlfrykKOyZs9c3XXpMi5Q==}
+
   '@tauri-apps/api@2.0.1':
     resolution: {integrity: sha512-eoQWT+Tq1qSwQpHV+nw1eNYe5B/nm1PoRjQCRiEOS12I1b+X4PUcREfXVX8dPcBT6GrzWGDtaecY0+1p0Rfqlw==}
 
@@ -1843,6 +2085,9 @@ packages:
   '@tauri-apps/plugin-dialog@2.0.1':
     resolution: {integrity: sha512-fnUrNr6EfvTqdls/ufusU7h6UbNFzLKvHk/zTuOiBq01R3dTODqwctZlzakdbfSp/7pNwTKvgKTAgl/NAP/Z0Q==}
 
+  '@tauri-apps/plugin-fs@2.0.0-rc.1':
+    resolution: {integrity: sha512-r6N5dqBNXy9YAK9XbiEqAq3ZKBIN+TWevE7ZFmSRdvdSB1urrLweYu4wxycY2kDaDPzSeeOIJhCmqdNrFT9OSA==}
+
   '@tauri-apps/plugin-fs@2.0.1':
     resolution: {integrity: sha512-PkeZG2WAob9Xpmr66aPvj+McDVgFjV2a7YBzYVZjiCvbGeMs6Yk09tlXhCe3EyZdT/pwWMSi8lXUace+hlsjsw==}
 
@@ -1861,6 +2106,9 @@ packages:
   '@tauri-apps/plugin-os@2.0.0':
     resolution: {integrity: sha512-M7hG/nNyQYTJxVG/UhTKhp9mpXriwWzrs9mqDreB8mIgqA3ek5nHLdwRZJWhkKjZrnDT4v9CpA9BhYeplTlAiA==}
 
+  '@tauri-apps/plugin-os@2.0.0-rc.0':
+    resolution: {integrity: sha512-OWAl8mooKnGykSD4iog8WRqcnOSx0gGmTJBlEExHdFeIuOHg0Ezvd+WiVLhT9LBg7go3ibNWRWpe/ZG7YEp4Vw==}
+
   '@tauri-apps/plugin-process@2.0.0':
     resolution: {integrity: sha512-OYzi0GnkrF4NAnsHZU7U3tjSoP0PbeAlO7T1Z+vJoBUH9sFQ1NSLqWYWQyf8hcb3gVWe7P1JggjiskO+LST1ug==}
 
@@ -1913,6 +2161,9 @@ packages:
   '@types/madge@5.0.3':
     resolution: {integrity: sha512-NlQJd0qRAoyu+pawTDhLxkW940QT2dqASfwd2g/xEZu2F4Xjwa7TVRSPdbmZwUF1ygvAh0/nepeN7JjwEuOXCA==}
 
+  '@types/marked@5.0.2':
+    resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -1928,6 +2179,9 @@ packages:
   '@types/phoenix@1.6.5':
     resolution: {integrity: sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==}
 
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
@@ -2017,6 +2271,86 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@unocss/astro@0.64.0':
+    resolution: {integrity: sha512-4Ijf3cQblSjdC3XV4SvzkEj17z6gNsuMGy7M+TvNN4cZhGLWQCIChtHR525ESGxJ4kdZ6FoIUoxmLdWHMOpX4Q==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  '@unocss/cli@0.64.0':
+    resolution: {integrity: sha512-xfY/qm7vr/4Qaf+CcQHuBJSg5ApZBvvGVD1zwyGFgfhfOFYR1hI3DS2zl75zav6btEwwXsjY7AUv6uYGF4M7dA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  '@unocss/config@0.64.0':
+    resolution: {integrity: sha512-L97x4vEk7jNG5ptZY5Xp0xgEk//tbMpQVm2BzfyL7w+Hg8X3AV4YjFL6hysHvpYiTdUCVaZg+S0s3b7wuj8Mqw==}
+    engines: {node: '>=14'}
+
+  '@unocss/core@0.64.0':
+    resolution: {integrity: sha512-Qb8wWPYNlTagCdJGzULew+e3NMM8Bd7fr38lDLgrMj+njop+wzkSe1ZZOyMMH9yHSq/Rznn5eCjnyzyHwxGslQ==}
+
+  '@unocss/extractor-arbitrary-variants@0.64.0':
+    resolution: {integrity: sha512-oVB8l8zM+x0MQJTkraRcsrfJnWEwyPVgMgtzmNUm//HqV+xTrjZCNtOqHFNIZdj/+w0gkErGQLxzRwyPjlHq4g==}
+
+  '@unocss/inspector@0.64.0':
+    resolution: {integrity: sha512-aFEfxEuPOpbPNH3j1CLLnN7ZyZkc64XoxZbz7RbG20Wy5oJxonOnlu+Wikz9SfGvIyF16MVAMCkHu12WFRRC+g==}
+
+  '@unocss/postcss@0.64.0':
+    resolution: {integrity: sha512-OMDhAUDEzbb7i+fcYEYNxwdWJLSYklMrFGSC60ADK96UPX/B9S0z1pBz7N34DRPPIzg6shO6NQfDHOaxLelAeg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  '@unocss/preset-attributify@0.64.0':
+    resolution: {integrity: sha512-3T1mktq5rAQxHXtdLkjjj1UOjPwy9iGbVUChvxyaGV5oOsj1mvfe1oetxz8HqAVQak8MtvsJzFzvuuQQln/6OA==}
+
+  '@unocss/preset-icons@0.64.0':
+    resolution: {integrity: sha512-jhozA4r583agZZpKttdootaWfvQ29lY/kHxNU1Ah2xeRQcVXXEh7M3cG0bo9HSIX9/BgXSk5rWQlqSPIqFl4Lw==}
+
+  '@unocss/preset-mini@0.64.0':
+    resolution: {integrity: sha512-bc7zanalVQUrETJ06eyS7y/lhceRlY8kBG/lRCV/dYmKl4Ho/s57LrpZH0G63OcO6IfWIjwoZHVC8/RHAqnYvQ==}
+
+  '@unocss/preset-tagify@0.64.0':
+    resolution: {integrity: sha512-WlRQXYgtVzJpVlZ+itXhrQyvMj6XW1InNIfvAHMorr5BGvMGETLRnuWwYYhGg2YDF/g+/EucU5PQmk9UkurBzg==}
+
+  '@unocss/preset-typography@0.64.0':
+    resolution: {integrity: sha512-hMKxhHTRUjvwB0gcdWOh6zWWolH9pvIvgB4p2GaFT1vKyFD0wkTZ/7S/Q3OMKJyevSKHyIgKd+PhNGKTx5FuQQ==}
+
+  '@unocss/preset-uno@0.64.0':
+    resolution: {integrity: sha512-gUmuL8anty551r/Q2XU5wc0aNZ+te4yydnamXHSUv3EkX6PCphOaiWsQ5f95fj26G8EYH9fLBvxqXurFBPM7og==}
+
+  '@unocss/preset-web-fonts@0.64.0':
+    resolution: {integrity: sha512-qraIhS0tCFHvdPQnzGTfi/dggwyboWPU8UQn8oLMsmPKogNPsYQfjrtTZs8X6F1KNaPV18c6saaWYvVZ8tXPoA==}
+
+  '@unocss/preset-wind@0.64.0':
+    resolution: {integrity: sha512-cJbZI4etFrIIQoC1VhRqyEZU5fUaYqOH3uIt5lM3osxBdAvHds7SPjLRbdR612US7JbuPeFhMMRnA1EYoo39sQ==}
+
+  '@unocss/reset@0.64.0':
+    resolution: {integrity: sha512-75SiDtRX/mtg/7GWeoLfDfdWF4z59zF1XesL46FNd2hDZL36a+SZHIKB/J+PPzLyX9irqm3mAETS2PNfynuJpA==}
+
+  '@unocss/rule-utils@0.64.0':
+    resolution: {integrity: sha512-R5b/uspq6XsmpEqhxSzOOePHsS+pdxya+0pkQw7m6thsUxNDL7kVDpBiz2iNX5lnwagvhyhUWYu85a8XmZ8ymw==}
+    engines: {node: '>=14'}
+
+  '@unocss/transformer-attributify-jsx@0.64.0':
+    resolution: {integrity: sha512-/kG7NFmqMCftK5DJUgMUbe9SWRJt20Z55o36aaCkBcEsrTSYBmWYDyIJPZa3TxsjO8H1qDekRVu7CgDxwlxMEQ==}
+
+  '@unocss/transformer-compile-class@0.64.0':
+    resolution: {integrity: sha512-p1LZG2AUsD0FrkCSo1JOsWVQ+sEMcgnVCm6XtCgxBraV3nPFeZUyxmj9yEkt0HhfYkMTvdT155c3rDhbwP8AFw==}
+
+  '@unocss/transformer-directives@0.64.0':
+    resolution: {integrity: sha512-+e2bDEQMEsfq4KZ2R+GQNrEv0bL3E1KbXGPQXUiMGitmZzzagDfIBk9VTP3gNhU+hgTaWtjXlReeap1eSmwKGQ==}
+
+  '@unocss/transformer-variant-group@0.64.0':
+    resolution: {integrity: sha512-c4CN+W8ShBhGIma3KHHcBe7CRljRwZ0f5UamRrUIMs28a2jfa1TlPlr/4Ke5b6icr0mwTGajJEUaPanOK0Fp1A==}
+
+  '@unocss/vite@0.64.0':
+    resolution: {integrity: sha512-QrfXlI8YcIaqQc4WRVrLbCho8eEi5pjs1/C8AwnUHGximEDN6MZNUk0htjo4QZ+50IA2b4RrYdz1N3875bJoFg==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+
   '@vinejs/compiler@2.5.0':
     resolution: {integrity: sha512-hg4ekaB5Y2zh+IWzBiC/WCDWrIfpVnKu/ubUvelKlidc/VbulsexoFRw5kJGHZenPVI5YzNnDeTdYSALkTV7jQ==}
     engines: {node: '>=18.0.0'}
@@ -2037,6 +2371,20 @@ packages:
   '@vue/compiler-ssr@3.5.12':
     resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
 
+  '@vue/reactivity@3.5.12':
+    resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
+
+  '@vue/runtime-core@3.5.12':
+    resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
+
+  '@vue/runtime-dom@3.5.12':
+    resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
+
+  '@vue/server-renderer@3.5.12':
+    resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
+    peerDependencies:
+      vue: 3.5.12
+
   '@vue/shared@3.5.12':
     resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 
@@ -2192,6 +2540,16 @@ packages:
   bun-types@1.1.34:
     resolution: {integrity: sha512-br5QygTEL/TwB4uQOb96Ky22j4Gq2WxWH/8Oqv20fk5HagwKXo/akB+LiYgSfzexCt6kkcUaVm+bKiPl71xPvw==}
 
+  bundle-require@5.0.0:
+    resolution: {integrity: sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.18'
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -2250,6 +2608,10 @@ packages:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
 
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
   clone@1.0.4:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
@@ -2269,6 +2631,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
   comlink-stdio@0.1.7:
     resolution: {integrity: sha512-LTTyZfEq3KuDKnNSFDsDbJzNh5F6h+MTd13D6K7yRt9zvnP2nxZ5DgyaAaw2H87vQUzJ1T93Se1o3FHk9Ch7cw==}
     peerDependencies:
@@ -2305,6 +2670,13 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  consola@3.2.3:
+    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -2319,11 +2691,18 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  css-tree@3.0.1:
+    resolution: {integrity: sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
 
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
   data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -2354,6 +2733,13 @@ packages:
   defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
 
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
   dependency-tree@11.0.1:
     resolution: {integrity: sha512-eCt7HSKIC9NxgIykG2DRq3Aewn9UhVS14MB3rEn6l/AsEI1FBg6ZGSlCU0SZ6Tjm2kkhj6/8c2pViinuyKELhg==}
     engines: {node: '>=18'}
@@ -2363,6 +2749,9 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
+  destr@2.0.3:
+    resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
+
   detect-indent@6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
@@ -2434,6 +2823,9 @@ packages:
     resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
     engines: {node: '>=12'}
 
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -2485,6 +2877,11 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
+  esbuild@0.23.1:
+    resolution: {integrity: sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   esbuild@0.24.0:
     resolution: {integrity: sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==}
     engines: {node: '>=18'}
@@ -2712,9 +3109,16 @@ packages:
     resolution: {integrity: sha512-hFM7oivtlgJ3d6XWD6G47l8Wyh/C6vFw5G24Kk1Tbq85yh5gcM8Fne5/lFhiuxB+RT6+SI7I1ThB9lG4FBh3jw==}
     engines: {node: '>=18'}
 
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
   get-own-enumerable-property-symbols@3.0.2:
     resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
 
+  get-tsconfig@4.8.1:
+    resolution: {integrity: sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -2763,6 +3167,10 @@ packages:
   gsap@3.12.5:
     resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==}
 
+  gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -2787,6 +3195,9 @@ packages:
   human-id@1.0.2:
     resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
 
+  i18next@23.16.5:
+    resolution: {integrity: sha512-KTlhE3EP9x6pPTAW7dy0WKIhoCpfOGhRQlO+jttQLgzVaoOjWwBWramu7Pp0i+8wDNduuzXfe3kkVbzrKyrbTA==}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -2805,6 +3216,9 @@ packages:
   import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
 
+  importx@0.4.4:
+    resolution: {integrity: sha512-Lo1pukzAREqrBnnHC+tj+lreMTAvyxtkKsMxLY8H15M/bvLl54p3YuoTI70Tz7Il0AsgSlD7Lrk/FaApRcBL7w==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -2834,6 +3248,11 @@ packages:
     resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
     engines: {node: '>= 0.4'}
 
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2850,6 +3269,9 @@ packages:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
 
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -2862,6 +3284,9 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+
   is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
 
@@ -2888,6 +3313,10 @@ packages:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
 
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -2898,6 +3327,10 @@ packages:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
 
+  jiti@2.0.0-beta.3:
+    resolution: {integrity: sha512-pmfRbVRs/7khFrSAYnSiJ8C0D5GvzkE4Ey2pAvUcJsw1ly/p+7ut27jbJrjY79BpAJQJ4gXYFtK6d1Aub+9baQ==}
+    hasBin: true
+
   joi@17.13.3:
     resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
 
@@ -2954,6 +3387,9 @@ packages:
   known-css-properties@0.35.0:
     resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -2975,6 +3411,14 @@ packages:
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
+  load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+    engines: {node: '>=14'}
+
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
@@ -3043,9 +3487,17 @@ packages:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
+  marked@5.1.2:
+    resolution: {integrity: sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==}
+    engines: {node: '>= 16'}
+    hasBin: true
+
   mdast-util-to-hast@13.2.0:
     resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
+  mdn-data@2.12.1:
+    resolution: {integrity: sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==}
+
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
@@ -3110,6 +3562,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mlly@1.7.2:
+    resolution: {integrity: sha512-tN3dvVHYVz4DhSXinXIk7u9syPYaJvio118uomkovAtWBT+RdbP6Lfh/5Lvo519YMmwBafwlh20IPTXIStscpA==}
+
   mode-watcher@0.4.1:
     resolution: {integrity: sha512-bNC+1NXmwEFZtziCdZSgP7HFQTpqJPcQn9GwwJQGSf6SBF3neEPYV1uRwkYuAQwbsvsXIYtzaqgedDzJ7D1mhg==}
     peerDependencies:
@@ -3160,6 +3615,9 @@ packages:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
 
+  node-fetch-native@1.6.4:
+    resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
+
   node-fetch@3.3.2:
     resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3195,6 +3653,9 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
+  ofetch@1.4.1:
+    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -3205,6 +3666,10 @@ packages:
   oniguruma-to-js@0.4.3:
     resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
 
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -3290,6 +3755,12 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
@@ -3316,6 +3787,9 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
+  pkg-types@1.2.1:
+    resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
+
   plimit-lit@1.6.1:
     resolution: {integrity: sha512-B7+VDyb8Tl6oMJT9oSO2CW8XC/T4UcJGrwOVoNGwOQsQYhlpfajmrMj5xeejqaASq3V/EqThyOeATEOMuSEXiA==}
     engines: {node: '>=12'}
@@ -3554,6 +4028,10 @@ packages:
   regex@4.4.0:
     resolution: {integrity: sha512-uCUSuobNVeqUupowbdZub6ggI5/JZkYyJdDogddJr60L764oxC2pMZov1fQ3wM9bdyzUILDG+Sqx6NAKAz9rKQ==}
 
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
   requirejs-config-file@4.0.0:
     resolution: {integrity: sha512-jnIre8cbWOyvr8a5F2KuqBnY+SDA4NXr/hzEZJG79Mxm2WiFQz2dzhC8ibtPJS7zkmBEl1mxSwp5HhC1W4qpxw==}
     engines: {node: '>=10.13.0'}
@@ -3575,6 +4053,9 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -3596,6 +4077,16 @@ packages:
     resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
     hasBin: true
 
+  rollup-plugin-visualizer@5.12.0:
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   rollup@4.24.3:
     resolution: {integrity: sha512-HBW896xR5HGmoksbi3JBDtmVzWiPAYqp7wip50hjQ67JbDz61nyoMPdqu1DvVW9asYb2M65Z20ZHsyJCMqMyDg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -3672,6 +4163,10 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
   sirv@3.0.0:
     resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
     engines: {node: '>=18'}
@@ -3691,6 +4186,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
@@ -3791,6 +4290,11 @@ packages:
       svelte:
         optional: true
 
+  svelte-markdown@0.4.1:
+    resolution: {integrity: sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==}
+    peerDependencies:
+      svelte: ^4.0.0
+
   svelte-persisted-store@0.12.0:
     resolution: {integrity: sha512-BdBQr2SGSJ+rDWH8/aEV5GthBJDapVP0GP3fuUCA7TjYG5ctcB+O9Mj9ZC0+Jo1oJMfZUd1y9H68NFRR5MyIJA==}
     engines: {node: '>=0.14'}
@@ -3896,6 +4400,13 @@ packages:
   tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 
+  tinyexec@0.3.1:
+    resolution: {integrity: sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==}
+
+  tinyglobby@0.2.10:
+    resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
+    engines: {node: '>=12.0.0'}
+
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -3951,6 +4462,11 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tsx@4.19.2:
+    resolution: {integrity: sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   turbo-darwin-64@2.2.3:
     resolution: {integrity: sha512-Rcm10CuMKQGcdIBS3R/9PMeuYnv6beYIHqfZFeKWVYEWH69sauj4INs83zKMTUiZJ3/hWGZ4jet9AOwhsssLyg==}
     cpu: [x64]
@@ -4017,6 +4533,12 @@ packages:
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+
+  unconfig@0.5.5:
+    resolution: {integrity: sha512-VQZ5PT9HDX+qag0XdgQi8tJepPhXiR/yVOkn707gJDKo31lGjRilPREiQJ9Z6zd/Ugpv6ZvO5VxVIcatldYcNQ==}
+
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
@@ -4046,6 +4568,18 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unocss@0.64.0:
+    resolution: {integrity: sha512-wiEFRjGXSogzf/4+KICXjFDgSGloSCV1Ka2Dct/8Z8U+iwRqeVpHGVQcGjBFg9Uh0DH1fSVBbis2aPuIkT0nEA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.64.0
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+      vite:
+        optional: true
+
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -4147,6 +4681,22 @@ packages:
       vite:
         optional: true
 
+  vue-flow-layout@0.1.1:
+    resolution: {integrity: sha512-JdgRRUVrN0Y2GosA0M68DEbKlXMqJ7FQgsK8CjQD2vxvNSqAU6PZEpi4cfcTVtfM2GVOMjHo7GKKLbXxOBqDqA==}
+    peerDependencies:
+      vue: ^3.4.37
+
+  vue-sonner@1.2.5:
+    resolution: {integrity: sha512-dAFCdq2cYxEwvW4gHuJhySCXklmxOWzjl5QwkNL9IIdkqyvSkdu+YnAbnJBdIAH/zo1bhXTuGG+m0Two4AX/KA==}
+
+  vue@3.5.12:
+    resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   walkdir@0.4.1:
     resolution: {integrity: sha512-3eBwRyEln6E1MSzcxcVpQIhRG8Q1jLvEqRmCZqS3dsfXEDR/AhOF4d+jHg1qvDCpYaVRZjENPQyrVxAkQqxPgQ==}
     engines: {node: '>=6.0.0'}
@@ -4204,6 +4754,10 @@ packages:
       utf-8-validate:
         optional: true
 
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
   yallist@2.1.2:
     resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
 
@@ -4223,6 +4777,14 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -4253,6 +4815,13 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/install-pkg@0.4.1':
+    dependencies:
+      package-manager-detector: 0.2.2
+      tinyexec: 0.3.1
+
+  '@antfu/utils@0.7.10': {}
+
   '@ark/schema@0.10.0':
     dependencies:
       '@ark/util': 0.10.0
@@ -5024,141 +5593,213 @@ snapshots:
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
+  '@esbuild/aix-ppc64@0.23.1':
+    optional: true
+
   '@esbuild/aix-ppc64@0.24.0':
     optional: true
 
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
+  '@esbuild/android-arm64@0.23.1':
+    optional: true
+
   '@esbuild/android-arm64@0.24.0':
     optional: true
 
   '@esbuild/android-arm@0.21.5':
     optional: true
 
+  '@esbuild/android-arm@0.23.1':
+    optional: true
+
   '@esbuild/android-arm@0.24.0':
     optional: true
 
   '@esbuild/android-x64@0.21.5':
     optional: true
 
+  '@esbuild/android-x64@0.23.1':
+    optional: true
+
   '@esbuild/android-x64@0.24.0':
     optional: true
 
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
+  '@esbuild/darwin-arm64@0.23.1':
+    optional: true
+
   '@esbuild/darwin-arm64@0.24.0':
     optional: true
 
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
+  '@esbuild/darwin-x64@0.23.1':
+    optional: true
+
   '@esbuild/darwin-x64@0.24.0':
     optional: true
 
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.23.1':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.24.0':
     optional: true
 
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/freebsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/freebsd-x64@0.24.0':
     optional: true
 
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
+  '@esbuild/linux-arm64@0.23.1':
+    optional: true
+
   '@esbuild/linux-arm64@0.24.0':
     optional: true
 
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
+  '@esbuild/linux-arm@0.23.1':
+    optional: true
+
   '@esbuild/linux-arm@0.24.0':
     optional: true
 
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
+  '@esbuild/linux-ia32@0.23.1':
+    optional: true
+
   '@esbuild/linux-ia32@0.24.0':
     optional: true
 
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
+  '@esbuild/linux-loong64@0.23.1':
+    optional: true
+
   '@esbuild/linux-loong64@0.24.0':
     optional: true
 
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
+  '@esbuild/linux-mips64el@0.23.1':
+    optional: true
+
   '@esbuild/linux-mips64el@0.24.0':
     optional: true
 
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
+  '@esbuild/linux-ppc64@0.23.1':
+    optional: true
+
   '@esbuild/linux-ppc64@0.24.0':
     optional: true
 
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
+  '@esbuild/linux-riscv64@0.23.1':
+    optional: true
+
   '@esbuild/linux-riscv64@0.24.0':
     optional: true
 
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
+  '@esbuild/linux-s390x@0.23.1':
+    optional: true
+
   '@esbuild/linux-s390x@0.24.0':
     optional: true
 
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
+  '@esbuild/linux-x64@0.23.1':
+    optional: true
+
   '@esbuild/linux-x64@0.24.0':
     optional: true
 
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/netbsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/netbsd-x64@0.24.0':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.23.1':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.24.0':
     optional: true
 
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/openbsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/openbsd-x64@0.24.0':
     optional: true
 
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
+  '@esbuild/sunos-x64@0.23.1':
+    optional: true
+
   '@esbuild/sunos-x64@0.24.0':
     optional: true
 
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
+  '@esbuild/win32-arm64@0.23.1':
+    optional: true
+
   '@esbuild/win32-arm64@0.24.0':
     optional: true
 
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
+  '@esbuild/win32-ia32@0.23.1':
+    optional: true
+
   '@esbuild/win32-ia32@0.24.0':
     optional: true
 
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
+  '@esbuild/win32-x64@0.23.1':
+    optional: true
+
   '@esbuild/win32-x64@0.24.0':
     optional: true
 
@@ -5263,6 +5904,18 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
+  '@iconify/utils@2.1.33':
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/types': 2.0.0
+      debug: 4.3.7
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      mlly: 1.7.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@internationalized/date@3.5.6':
     dependencies:
       '@swc/helpers': 0.5.13
@@ -5303,6 +5956,26 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@jsr/hk__comlink-stdio@0.1.7': {}
+
+  '@jsr/kunkun__api@0.0.13(tslib@2.8.1)(typescript@5.6.3)':
+    dependencies:
+      '@huakunshen/comlink': 4.4.1
+      '@jsr/hk__comlink-stdio': 0.1.7
+      '@tauri-apps/api': 2.0.0-rc.3
+      '@tauri-apps/plugin-fs': 2.0.0-rc.1
+      '@tauri-apps/plugin-os': 2.0.0-rc.0
+      lodash: 4.17.21
+      minimatch: 10.0.1
+      semver: 7.6.3
+      tauri-api-adapter: 0.3.8(tslib@2.8.1)(typescript@5.6.3)
+      tauri-plugin-shellx-api: 2.0.11
+      valibot: 0.40.0(typescript@5.6.3)
+      vue-sonner: 1.2.5
+    transitivePeerDependencies:
+      - tslib
+      - typescript
+
   '@jsr/std__semver@1.0.3': {}
 
   '@kksh/svelte5@0.1.2-beta.8(lucide-svelte@0.454.0(svelte@5.1.9))(svelte-sonner@0.3.28(svelte@5.1.9))(svelte@5.1.9)':
@@ -5362,6 +6035,27 @@ snapshots:
     optionalDependencies:
       rollup: 4.24.3
 
+  '@rollup/plugin-commonjs@26.0.3(rollup@4.24.3)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 10.4.5
+      is-reference: 1.2.1
+      magic-string: 0.30.12
+    optionalDependencies:
+      rollup: 4.24.3
+
+  '@rollup/plugin-node-resolve@15.3.0(rollup@4.24.3)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+    optionalDependencies:
+      rollup: 4.24.3
+
   '@rollup/plugin-typescript@11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.5.4)':
     dependencies:
       '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
@@ -5371,6 +6065,15 @@ snapshots:
       rollup: 4.24.3
       tslib: 2.8.1
 
+  '@rollup/plugin-typescript@11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.6.3)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      resolve: 1.22.8
+      typescript: 5.6.3
+    optionalDependencies:
+      rollup: 4.24.3
+      tslib: 2.8.1
+
   '@rollup/pluginutils@5.1.3(rollup@4.24.3)':
     dependencies:
       '@types/estree': 1.0.6
@@ -5924,6 +6627,8 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.14
 
+  '@tauri-apps/api@2.0.0-rc.3': {}
+
   '@tauri-apps/api@2.0.1': {}
 
   '@tauri-apps/api@2.0.3': {}
@@ -5979,6 +6684,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.0.3
 
+  '@tauri-apps/plugin-fs@2.0.0-rc.1':
+    dependencies:
+      '@tauri-apps/api': 2.0.3
+
   '@tauri-apps/plugin-fs@2.0.1':
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -6003,6 +6712,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.0.3
 
+  '@tauri-apps/plugin-os@2.0.0-rc.0':
+    dependencies:
+      '@tauri-apps/api': 2.0.3
+
   '@tauri-apps/plugin-process@2.0.0':
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -6059,6 +6772,8 @@ snapshots:
     dependencies:
       '@types/node': 22.8.7
 
+  '@types/marked@5.0.2': {}
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -6075,6 +6790,8 @@ snapshots:
 
   '@types/phoenix@1.6.5': {}
 
+  '@types/resolve@1.20.2': {}
+
   '@types/semver@7.5.8': {}
 
   '@types/unist@3.0.3': {}
@@ -6183,6 +6900,157 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@unocss/astro@0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/reset': 0.64.0
+      '@unocss/vite': 0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+    optionalDependencies:
+      vite: 5.4.10(@types/node@22.8.7)(terser@5.36.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vue
+
+  '@unocss/cli@0.64.0(rollup@4.24.3)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      '@unocss/config': 0.64.0
+      '@unocss/core': 0.64.0
+      '@unocss/preset-uno': 0.64.0
+      cac: 6.7.14
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      consola: 3.2.3
+      magic-string: 0.30.12
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      tinyglobby: 0.2.10
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  '@unocss/config@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      unconfig: 0.5.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/core@0.64.0': {}
+
+  '@unocss/extractor-arbitrary-variants@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/inspector@0.64.0(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+      gzip-size: 6.0.0
+      sirv: 2.0.4
+      vue-flow-layout: 0.1.1(vue@3.5.12(typescript@5.6.3))
+    transitivePeerDependencies:
+      - vue
+
+  '@unocss/postcss@0.64.0(postcss@8.4.47)':
+    dependencies:
+      '@unocss/config': 0.64.0
+      '@unocss/core': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+      css-tree: 3.0.1
+      postcss: 8.4.47
+      tinyglobby: 0.2.10
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/preset-attributify@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/preset-icons@0.64.0':
+    dependencies:
+      '@iconify/utils': 2.1.33
+      '@unocss/core': 0.64.0
+      ofetch: 1.4.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/preset-mini@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/extractor-arbitrary-variants': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+
+  '@unocss/preset-tagify@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/preset-typography@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/preset-mini': 0.64.0
+
+  '@unocss/preset-uno@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/preset-mini': 0.64.0
+      '@unocss/preset-wind': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+
+  '@unocss/preset-web-fonts@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      ofetch: 1.4.1
+
+  '@unocss/preset-wind@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/preset-mini': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+
+  '@unocss/reset@0.64.0': {}
+
+  '@unocss/rule-utils@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      magic-string: 0.30.12
+
+  '@unocss/transformer-attributify-jsx@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/transformer-compile-class@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/transformer-directives@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+      css-tree: 3.0.1
+
+  '@unocss/transformer-variant-group@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/vite@0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      '@unocss/config': 0.64.0
+      '@unocss/core': 0.64.0
+      '@unocss/inspector': 0.64.0(vue@3.5.12(typescript@5.6.3))
+      chokidar: 3.6.0
+      magic-string: 0.30.12
+      tinyglobby: 0.2.10
+      vite: 5.4.10(@types/node@22.8.7)(terser@5.36.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vue
+
   '@vinejs/compiler@2.5.0':
     optional: true
 
@@ -6228,6 +7096,28 @@ snapshots:
       '@vue/compiler-dom': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/reactivity@3.5.12':
+    dependencies:
+      '@vue/shared': 3.5.12
+
+  '@vue/runtime-core@3.5.12':
+    dependencies:
+      '@vue/reactivity': 3.5.12
+      '@vue/shared': 3.5.12
+
+  '@vue/runtime-dom@3.5.12':
+    dependencies:
+      '@vue/reactivity': 3.5.12
+      '@vue/runtime-core': 3.5.12
+      '@vue/shared': 3.5.12
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      vue: 3.5.12(typescript@5.6.3)
+
   '@vue/shared@3.5.12': {}
 
   acorn-jsx@5.3.2(acorn@8.12.1):
@@ -6392,6 +7282,13 @@ snapshots:
       '@types/node': 20.12.14
       '@types/ws': 8.5.13
 
+  bundle-require@5.0.0(esbuild@0.21.5):
+    dependencies:
+      esbuild: 0.21.5
+      load-tsconfig: 0.2.5
+
+  cac@6.7.14: {}
+
   callsites@3.1.0: {}
 
   camelcase-css@2.0.1: {}
@@ -6447,6 +7344,12 @@ snapshots:
 
   cli-spinners@2.9.2: {}
 
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
   clone@1.0.4: {}
 
   clsx@2.1.1: {}
@@ -6459,6 +7362,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  colorette@2.0.20: {}
+
   comlink-stdio@0.1.7(typescript@5.5.4):
     dependencies:
       typescript: 5.5.4
@@ -6482,6 +7387,10 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  confbox@0.1.8: {}
+
+  consola@3.2.3: {}
+
   convert-source-map@2.0.0: {}
 
   cookie@0.6.0: {}
@@ -6498,8 +7407,15 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-tree@3.0.1:
+    dependencies:
+      mdn-data: 2.12.1
+      source-map-js: 1.2.1
+
   cssesc@3.0.0: {}
 
+  csstype@3.1.3: {}
+
   data-uri-to-buffer@4.0.1: {}
 
   dayjs@1.11.13:
@@ -6519,6 +7435,10 @@ snapshots:
     dependencies:
       clone: 1.0.4
 
+  define-lazy-prop@2.0.0: {}
+
+  defu@6.1.4: {}
+
   dependency-tree@11.0.1:
     dependencies:
       commander: 12.1.0
@@ -6530,6 +7450,8 @@ snapshots:
 
   dequal@2.0.3: {}
 
+  destr@2.0.3: {}
+
   detect-indent@6.1.0: {}
 
   detective-amd@6.0.0:
@@ -6608,6 +7530,8 @@ snapshots:
 
   dotenv@16.0.3: {}
 
+  duplexer@0.1.2: {}
+
   eastasianwidth@0.2.0: {}
 
   effect@3.10.8:
@@ -6678,6 +7602,33 @@ snapshots:
       '@esbuild/win32-ia32': 0.21.5
       '@esbuild/win32-x64': 0.21.5
 
+  esbuild@0.23.1:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.23.1
+      '@esbuild/android-arm': 0.23.1
+      '@esbuild/android-arm64': 0.23.1
+      '@esbuild/android-x64': 0.23.1
+      '@esbuild/darwin-arm64': 0.23.1
+      '@esbuild/darwin-x64': 0.23.1
+      '@esbuild/freebsd-arm64': 0.23.1
+      '@esbuild/freebsd-x64': 0.23.1
+      '@esbuild/linux-arm': 0.23.1
+      '@esbuild/linux-arm64': 0.23.1
+      '@esbuild/linux-ia32': 0.23.1
+      '@esbuild/linux-loong64': 0.23.1
+      '@esbuild/linux-mips64el': 0.23.1
+      '@esbuild/linux-ppc64': 0.23.1
+      '@esbuild/linux-riscv64': 0.23.1
+      '@esbuild/linux-s390x': 0.23.1
+      '@esbuild/linux-x64': 0.23.1
+      '@esbuild/netbsd-x64': 0.23.1
+      '@esbuild/openbsd-arm64': 0.23.1
+      '@esbuild/openbsd-x64': 0.23.1
+      '@esbuild/sunos-x64': 0.23.1
+      '@esbuild/win32-arm64': 0.23.1
+      '@esbuild/win32-ia32': 0.23.1
+      '@esbuild/win32-x64': 0.23.1
+
   esbuild@0.24.0:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.24.0
@@ -6978,8 +7929,14 @@ snapshots:
       ast-module-types: 6.0.0
       node-source-walk: 7.0.0
 
+  get-caller-file@2.0.5: {}
+
   get-own-enumerable-property-symbols@3.0.2: {}
 
+  get-tsconfig@4.8.1:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -7035,6 +7992,10 @@ snapshots:
 
   gsap@3.12.5: {}
 
+  gzip-size@6.0.0:
+    dependencies:
+      duplexer: 0.1.2
+
   has-flag@4.0.0: {}
 
   hasown@2.0.2:
@@ -7070,6 +8031,10 @@ snapshots:
 
   human-id@1.0.2: {}
 
+  i18next@23.16.5:
+    dependencies:
+      '@babel/runtime': 7.26.0
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -7085,6 +8050,18 @@ snapshots:
 
   import-meta-resolve@4.1.0: {}
 
+  importx@0.4.4:
+    dependencies:
+      bundle-require: 5.0.0(esbuild@0.21.5)
+      debug: 4.3.7
+      esbuild: 0.21.5
+      jiti: 2.0.0-beta.3
+      jiti-v1: jiti@1.21.6
+      pathe: 1.1.2
+      tsx: 4.19.2
+    transitivePeerDependencies:
+      - supports-color
+
   imurmurhash@0.1.4: {}
 
   inflight@1.0.6:
@@ -7108,6 +8085,8 @@ snapshots:
     dependencies:
       hasown: 2.0.2
 
+  is-docker@2.2.1: {}
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -7118,12 +8097,18 @@ snapshots:
 
   is-interactive@1.0.0: {}
 
+  is-module@1.0.0: {}
+
   is-number@7.0.0: {}
 
   is-obj@1.0.1: {}
 
   is-path-inside@3.0.3: {}
 
+  is-reference@1.2.1:
+    dependencies:
+      '@types/estree': 1.0.6
+
   is-reference@3.0.2:
     dependencies:
       '@types/estree': 1.0.6
@@ -7142,6 +8127,10 @@ snapshots:
 
   is-windows@1.0.2: {}
 
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
   isexe@2.0.0: {}
 
   jackspeak@3.4.3:
@@ -7152,6 +8141,8 @@ snapshots:
 
   jiti@1.21.6: {}
 
+  jiti@2.0.0-beta.3: {}
+
   joi@17.13.3:
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -7208,6 +8199,8 @@ snapshots:
 
   known-css-properties@0.35.0: {}
 
+  kolorist@1.8.0: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -7226,6 +8219,13 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
+  load-tsconfig@0.2.5: {}
+
+  local-pkg@0.5.0:
+    dependencies:
+      mlly: 1.7.2
+      pkg-types: 1.2.1
+
   locate-character@3.0.0: {}
 
   locate-path@5.0.0:
@@ -7302,6 +8302,8 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
+  marked@5.1.2: {}
+
   mdast-util-to-hast@13.2.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -7314,6 +8316,8 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
 
+  mdn-data@2.12.1: {}
+
   mdurl@2.0.0: {}
 
   memoize-weak@1.0.2: {}
@@ -7369,6 +8373,13 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
+  mlly@1.7.2:
+    dependencies:
+      acorn: 8.12.1
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      ufo: 1.5.4
+
   mode-watcher@0.4.1(svelte@5.1.9):
     dependencies:
       svelte: 5.1.9
@@ -7407,6 +8418,8 @@ snapshots:
 
   node-domexception@1.0.0: {}
 
+  node-fetch-native@1.6.4: {}
+
   node-fetch@3.3.2:
     dependencies:
       data-uri-to-buffer: 4.0.1
@@ -7432,6 +8445,12 @@ snapshots:
 
   object-hash@3.0.0: {}
 
+  ofetch@1.4.1:
+    dependencies:
+      destr: 2.0.3
+      node-fetch-native: 1.6.4
+      ufo: 1.5.4
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -7444,6 +8463,12 @@ snapshots:
     dependencies:
       regex: 4.4.0
 
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -7523,6 +8548,10 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@1.1.2: {}
+
+  perfect-debounce@1.0.0: {}
+
   picocolors@1.1.0: {}
 
   picocolors@1.1.1: {}
@@ -7537,6 +8566,12 @@ snapshots:
 
   pirates@4.0.6: {}
 
+  pkg-types@1.2.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.2
+      pathe: 1.1.2
+
   plimit-lit@1.6.1:
     dependencies:
       queue-lit: 1.5.2
@@ -7711,6 +8746,8 @@ snapshots:
 
   regex@4.4.0: {}
 
+  require-directory@2.1.1: {}
+
   requirejs-config-file@4.0.0:
     dependencies:
       esprima: 4.0.1
@@ -7724,6 +8761,8 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
+  resolve-pkg-maps@1.0.0: {}
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.15.1
@@ -7745,6 +8784,15 @@ snapshots:
     dependencies:
       glob: 10.4.5
 
+  rollup-plugin-visualizer@5.12.0(rollup@4.24.3):
+    dependencies:
+      open: 8.4.2
+      picomatch: 2.3.1
+      source-map: 0.7.4
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.24.3
+
   rollup@4.24.3:
     dependencies:
       '@types/estree': 1.0.6
@@ -7832,6 +8880,12 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
   sirv@3.0.0:
     dependencies:
       '@polka/url': 1.0.0-next.28
@@ -7851,6 +8905,8 @@ snapshots:
   source-map@0.6.1:
     optional: true
 
+  source-map@0.7.4: {}
+
   space-separated-tokens@2.0.2: {}
 
   spawndamnit@2.0.0:
@@ -7965,6 +9021,12 @@ snapshots:
     optionalDependencies:
       svelte: 5.1.9
 
+  svelte-markdown@0.4.1(svelte@5.1.9):
+    dependencies:
+      '@types/marked': 5.0.2
+      marked: 5.1.2
+      svelte: 5.1.9
+
   svelte-persisted-store@0.12.0(svelte@5.1.9):
     dependencies:
       svelte: 5.1.9
@@ -8106,6 +9168,33 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
+  tauri-api-adapter@0.3.8(tslib@2.8.1)(typescript@5.6.3):
+    dependencies:
+      '@huakunshen/comlink': 4.4.1
+      '@rollup/plugin-alias': 5.1.1(rollup@4.24.3)
+      '@rollup/plugin-typescript': 11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.6.3)
+      '@tauri-apps/api': 2.0.3
+      '@tauri-apps/plugin-dialog': 2.0.1
+      '@tauri-apps/plugin-fs': 2.0.1
+      '@tauri-apps/plugin-http': 2.0.1
+      '@tauri-apps/plugin-log': 2.0.0
+      '@tauri-apps/plugin-notification': 2.0.0
+      '@tauri-apps/plugin-os': 2.0.0
+      '@tauri-apps/plugin-shell': 2.0.1
+      '@tauri-apps/plugin-upload': 2.0.0
+      rimraf: 5.0.10
+      rollup: 4.24.3
+      shx: 0.3.4
+      tauri-plugin-clipboard-api: 2.1.11(typescript@5.6.3)
+      tauri-plugin-network-api: 2.0.4(typescript@5.6.3)
+      tauri-plugin-shellx-api: 2.0.11
+      tauri-plugin-system-info-api: 2.0.8(typescript@5.6.3)
+      tsc-alias: 1.8.10
+      typescript: 5.6.3
+      valibot: 0.40.0(typescript@5.6.3)
+    transitivePeerDependencies:
+      - tslib
+
   tauri-plugin-clipboard-api@2.1.11(typescript@5.5.4):
     dependencies:
       '@tauri-apps/api': 2.0.1
@@ -8113,6 +9202,13 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  tauri-plugin-clipboard-api@2.1.11(typescript@5.6.3):
+    dependencies:
+      '@tauri-apps/api': 2.0.1
+      valibot: 0.40.0(typescript@5.6.3)
+    transitivePeerDependencies:
+      - typescript
+
   tauri-plugin-network-api@2.0.4(typescript@5.5.4):
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -8120,6 +9216,13 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  tauri-plugin-network-api@2.0.4(typescript@5.6.3):
+    dependencies:
+      '@tauri-apps/api': 2.0.3
+      valibot: 0.40.0(typescript@5.6.3)
+    transitivePeerDependencies:
+      - typescript
+
   tauri-plugin-shellx-api@2.0.11:
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -8131,6 +9234,13 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  tauri-plugin-system-info-api@2.0.8(typescript@5.6.3):
+    dependencies:
+      '@tauri-apps/api': 2.0.3
+      valibot: 0.40.0(typescript@5.6.3)
+    transitivePeerDependencies:
+      - typescript
+
   term-size@2.2.1: {}
 
   terser@5.36.0:
@@ -8159,6 +9269,13 @@ snapshots:
       globalyzer: 0.1.0
       globrex: 0.1.2
 
+  tinyexec@0.3.1: {}
+
+  tinyglobby@0.2.10:
+    dependencies:
+      fdir: 6.4.2(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -8214,6 +9331,13 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsx@4.19.2:
+    dependencies:
+      esbuild: 0.23.1
+      get-tsconfig: 4.8.1
+    optionalDependencies:
+      fsevents: 2.3.3
+
   turbo-darwin-64@2.2.3:
     optional: true
 
@@ -8265,6 +9389,16 @@ snapshots:
 
   uc.micro@2.1.0: {}
 
+  ufo@1.5.4: {}
+
+  unconfig@0.5.5:
+    dependencies:
+      '@antfu/utils': 0.7.10
+      defu: 6.1.4
+      importx: 0.4.4
+    transitivePeerDependencies:
+      - supports-color
+
   undici-types@5.26.5: {}
 
   undici-types@6.19.8: {}
@@ -8296,6 +9430,33 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unocss@0.64.0(postcss@8.4.47)(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      '@unocss/astro': 0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@unocss/cli': 0.64.0(rollup@4.24.3)
+      '@unocss/core': 0.64.0
+      '@unocss/postcss': 0.64.0(postcss@8.4.47)
+      '@unocss/preset-attributify': 0.64.0
+      '@unocss/preset-icons': 0.64.0
+      '@unocss/preset-mini': 0.64.0
+      '@unocss/preset-tagify': 0.64.0
+      '@unocss/preset-typography': 0.64.0
+      '@unocss/preset-uno': 0.64.0
+      '@unocss/preset-web-fonts': 0.64.0
+      '@unocss/preset-wind': 0.64.0
+      '@unocss/transformer-attributify-jsx': 0.64.0
+      '@unocss/transformer-compile-class': 0.64.0
+      '@unocss/transformer-directives': 0.64.0
+      '@unocss/transformer-variant-group': 0.64.0
+      '@unocss/vite': 0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+    optionalDependencies:
+      vite: 5.4.10(@types/node@22.8.7)(terser@5.36.0)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vue
+
   update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
       browserslist: 4.24.2
@@ -8319,6 +9480,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
+  valibot@0.40.0(typescript@5.6.3):
+    optionalDependencies:
+      typescript: 5.6.3
+
   valibot@0.41.0(typescript@5.6.3):
     optionalDependencies:
       typescript: 5.6.3
@@ -8360,6 +9525,22 @@ snapshots:
     optionalDependencies:
       vite: 5.4.10(@types/node@22.8.7)(terser@5.36.0)
 
+  vue-flow-layout@0.1.1(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      vue: 3.5.12(typescript@5.6.3)
+
+  vue-sonner@1.2.5: {}
+
+  vue@3.5.12(typescript@5.6.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-sfc': 3.5.12
+      '@vue/runtime-dom': 3.5.12
+      '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.3))
+      '@vue/shared': 3.5.12
+    optionalDependencies:
+      typescript: 5.6.3
+
   walkdir@0.4.1: {}
 
   wcwidth@1.0.1:
@@ -8406,6 +9587,8 @@ snapshots:
 
   ws@8.18.0: {}
 
+  y18n@5.0.8: {}
+
   yallist@2.1.2: {}
 
   yallist@3.1.1: {}
@@ -8416,6 +9599,18 @@ snapshots:
 
   yaml@2.6.0: {}
 
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
   yocto-queue@0.1.0: {}
 
   yup@1.4.0: