From 383270c93aeb8272f5b0d2e5836b6f7e06efeaf6 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Fri, 8 Nov 2024 15:34:37 -0500
Subject: [PATCH] [features] UI Worker Extension, Troubleshooters, Quick Link
 (#21)

* perf: reduce desktop frontend bundle from 10 to 2MB

Use shiki fine-grained bundle, avoid bundling all languages and themes

* feat: add cross-page transition for ext store back button with gasp Flip

* refactor: move StoreListing.svelte in @kksh/ui back to desktop

I realized that StoreListing is a pure wrapper, all the interactions are done with props. Even if this component is later used in other projects, it either lacks flexibility or require more changes. So it's moved back to desktop as a regular +page.svelte

* feat: Add a bunch of builtin commands for app internal control

* feat: add system commands

* feat: add extensionsInstallDir var to +layout.ts, exposed to all pages

All pages won't need to get the path asynchronously, it's kind of like a global constant

* [feat] troubleshooters (#15)

* feat: add extension loading troubleshooter

* feat: add extension permission inspector

* feat: add extension window map troubleshooter (WIP)

* fix: unregister extension when window is closed

* Feature: Deep Link + Supabase OAuth + open extension in store with deep link (#16)

* feat(auth): add deep link and supabase auth

* fix(deep-link): fix some routing and reactive page rendering

* feat: implement supabase auth with pkce auth flow

* feat: add createTauriSyncStore factory function for creating sync svelte store

* Feature: Quick Link (#17)

* feat: add page for add quick link (not working yet)

* upgrade @kksh/svelte5

* fix: infinite recursive footer

* dep: add @kksh/svelte5 to ui package

* dep: add supabase-js

* dep: add @iconify/svelte

* style: modify StoreExtDetail width control

* fixed: UI for extension store detail

* feat: add page to create quick link

* feat: display quick links in cmd palette

* snapshot

* show queries in command input

* feat: quick link fully implemented

* refactor: format all with prettier

* feat: add icon picker for quick link adder

* fix: make invert for icon optional, caused many types to crash

* [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                     |   10 +-
 apps/desktop/src-tauri/src/utils/server.rs    |   33 -
 apps/desktop/src/lib/cmds/builtin.ts          |  318 ++--
 apps/desktop/src/lib/cmds/ext.ts              |   32 +-
 apps/desktop/src/lib/cmds/index.ts            |    3 +-
 apps/desktop/src/lib/cmds/quick-links.ts      |   25 +
 apps/desktop/src/lib/cmds/system.ts           |    4 +
 .../lib/components/common/DragNDrop.svelte    |   38 +
 .../lib/components/main/CommandPalette.svelte |   72 -
 .../standalone/settings/AddDevExtForm.svelte  |  149 ++
 .../install-npm-package-name-form.svelte      |   61 +
 .../settings/install-tarball-url-form.svelte  |   62 +
 apps/desktop/src/lib/stores/appConfig.ts      |   33 +-
 apps/desktop/src/lib/stores/appState.ts       |   28 +-
 apps/desktop/src/lib/stores/auth.ts           |   47 +
 apps/desktop/src/lib/stores/cmdQuery.ts       |   23 +
 apps/desktop/src/lib/stores/extensions.ts     |   52 +-
 apps/desktop/src/lib/stores/index.ts          |    2 +
 apps/desktop/src/lib/stores/quick-links.ts    |   39 +
 apps/desktop/src/lib/stores/winExtMap.ts      |   21 +-
 apps/desktop/src/lib/utils/deeplink.ts        |  115 ++
 apps/desktop/src/lib/utils/dom.ts             |    3 +
 apps/desktop/src/lib/utils/key.ts             |   10 +
 apps/desktop/src/lib/utils/sync-store.ts      |   44 +
 apps/desktop/src/lib/utils/tauri-events.ts    |   57 +
 apps/desktop/src/lib/utils/updater.ts         |   88 ++
 apps/desktop/src/routes/+error.svelte         |    9 +-
 apps/desktop/src/routes/+layout.svelte        |   13 +-
 apps/desktop/src/routes/+layout.ts            |    7 +
 apps/desktop/src/routes/+page.svelte          |  138 +-
 apps/desktop/src/routes/auth/+page.svelte     |   62 +
 .../src/routes/auth/confirm/+page.svelte      |   84 ++
 apps/desktop/src/routes/auth/confirm/+page.ts |   10 +
 .../extension/create-quick-link/+page.svelte  |  108 ++
 .../extension/create-quick-link/schema.ts     |    7 +
 .../permission-inspector/+page.svelte         |  100 ++
 .../src/routes/extension/store/+page.svelte   |   11 +-
 .../store/[identifier]/+error.svelte          |    6 +-
 .../extension/store/[identifier]/+page.svelte |   27 +-
 .../extension/store/[identifier]/+page.ts     |    6 +
 .../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    |    4 +-
 .../extension-loading/+page.svelte            |  129 ++
 .../extension-window/+page.svelte             |  111 ++
 apps/desktop/tailwind.config.ts               |    5 +-
 apps/desktop/tsconfig.json                    |   35 +-
 apps/desktop/uno.config.ts                    |    5 +
 apps/desktop/vite.config.js                   |    4 +-
 package.json                                  |    2 +-
 packages/api/jsr.json                         |    2 +-
 packages/api/package.json                     |    2 +-
 packages/api/src/commands/extension.ts        |    1 -
 packages/api/src/commands/system.ts           |    2 +-
 packages/api/src/constants.ts                 |    2 +-
 packages/api/src/dev/index.ts                 |    2 +-
 packages/api/src/models/extension.ts          |   12 +-
 packages/api/src/models/icon.ts               |   14 +-
 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/db.ts                  |   45 +-
 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/schema/package.json                  |    4 +-
 .../scripts/upload-schema-to-supabase.ts      |    5 +-
 packages/supabase/package.json                |    3 +-
 packages/supabase/src/index.ts                |    6 +-
 packages/types/src/appConfig.ts               |    2 +-
 packages/types/src/appState.ts                |    5 +
 packages/ui/components.json                   |    4 +-
 packages/ui/package.json                      |   13 +-
 .../components/common/IconMultiplexer.svelte  |   32 +-
 .../src/components/common/IconSelector.svelte |   56 +
 .../common/IconSelectorDialog.svelte          |   75 +
 .../components/common/IconSelectorForm.svelte |    0
 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    |    4 +
 .../error/raw-error-json-preset.svelte        |   35 +-
 .../extension/PermissionInspector.svelte      |    1 -
 .../extension/StoreExtDetail.svelte           |   10 +-
 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 +
 .../ui/src/components/main/BuiltinCmds.svelte |   10 +-
 .../components/main/CustomCommandInput.svelte |    3 +
 .../src/components/main/ExtCmdsGroup.svelte   |   11 +-
 .../main/GlobalCommandPaletteFooter.svelte    |   38 +-
 .../ui/src/components/main/QuickLinks.svelte  |   31 +
 .../ui/src/components/main/SystemCmds.svelte  |   31 +
 packages/ui/src/components/main/index.ts      |    2 +
 packages/ui/src/components/main/types.ts      |   23 +-
 .../src/components/theme/mode-toggle.svelte   |   16 +
 .../src/components/ui/form/form-button.svelte |    7 +
 .../ui/form/form-description.svelte           |   17 +
 .../ui/form/form-element-field.svelte         |   31 +
 .../ui/form/form-field-errors.svelte          |   30 +
 .../src/components/ui/form/form-field.svelte  |   31 +
 .../components/ui/form/form-fieldset.svelte   |   22 +
 .../src/components/ui/form/form-label.svelte  |   21 +
 .../src/components/ui/form/form-legend.svelte |   17 +
 packages/ui/src/components/ui/form/index.ts   |   33 +
 packages/ui/src/components/ui/label/index.ts  |    7 +
 .../ui/src/components/ui/label/label.svelte   |   15 +
 packages/ui/src/index.ts                      |    5 +-
 packages/ui/src/utils/command-score.ts        |  175 +++
 packages/ui/src/utils/form.ts                 |   47 +
 packages/ui/src/utils/index.ts                |    2 +
 packages/ui/tsconfig.json                     |    6 +-
 pnpm-lock.yaml                                | 1287 ++++++++++++++++-
 152 files changed, 6447 insertions(+), 476 deletions(-)
 create mode 100644 .gitattributes
 create mode 100644 apps/desktop/app.d.ts
 create mode 100644 apps/desktop/src/lib/cmds/quick-links.ts
 create mode 100644 apps/desktop/src/lib/cmds/system.ts
 create mode 100644 apps/desktop/src/lib/components/common/DragNDrop.svelte
 delete mode 100644 apps/desktop/src/lib/components/main/CommandPalette.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/lib/stores/auth.ts
 create mode 100644 apps/desktop/src/lib/stores/cmdQuery.ts
 create mode 100644 apps/desktop/src/lib/stores/quick-links.ts
 create mode 100644 apps/desktop/src/lib/utils/deeplink.ts
 create mode 100644 apps/desktop/src/lib/utils/dom.ts
 create mode 100644 apps/desktop/src/lib/utils/sync-store.ts
 create mode 100644 apps/desktop/src/lib/utils/tauri-events.ts
 create mode 100644 apps/desktop/src/lib/utils/updater.ts
 create mode 100644 apps/desktop/src/routes/auth/+page.svelte
 create mode 100644 apps/desktop/src/routes/auth/confirm/+page.svelte
 create mode 100644 apps/desktop/src/routes/auth/confirm/+page.ts
 create mode 100644 apps/desktop/src/routes/extension/create-quick-link/+page.svelte
 create mode 100644 apps/desktop/src/routes/extension/create-quick-link/schema.ts
 create mode 100644 apps/desktop/src/routes/extension/permission-inspector/+page.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/src/routes/troubleshooters/extension-loading/+page.svelte
 create mode 100644 apps/desktop/src/routes/troubleshooters/extension-window/+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/IconSelector.svelte
 create mode 100644 packages/ui/src/components/common/IconSelectorDialog.svelte
 create mode 100644 packages/ui/src/components/common/IconSelectorForm.svelte
 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
 create mode 100644 packages/ui/src/components/main/QuickLinks.svelte
 create mode 100644 packages/ui/src/components/main/SystemCmds.svelte
 create mode 100644 packages/ui/src/components/theme/mode-toggle.svelte
 create mode 100644 packages/ui/src/components/ui/form/form-button.svelte
 create mode 100644 packages/ui/src/components/ui/form/form-description.svelte
 create mode 100644 packages/ui/src/components/ui/form/form-element-field.svelte
 create mode 100644 packages/ui/src/components/ui/form/form-field-errors.svelte
 create mode 100644 packages/ui/src/components/ui/form/form-field.svelte
 create mode 100644 packages/ui/src/components/ui/form/form-fieldset.svelte
 create mode 100644 packages/ui/src/components/ui/form/form-label.svelte
 create mode 100644 packages/ui/src/components/ui/form/form-legend.svelte
 create mode 100644 packages/ui/src/components/ui/form/index.ts
 create mode 100644 packages/ui/src/components/ui/label/index.ts
 create mode 100644 packages/ui/src/components/ui/label/label.svelte
 create mode 100644 packages/ui/src/utils/command-score.ts
 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 717ed17..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:*",
@@ -27,9 +28,11 @@
 		"lucide-svelte": "^0.454.0",
 		"lz-string": "^1.5.0",
 		"mode-watcher": "^0.4.1",
+		"semver": "^7.6.3",
 		"svelte-radix": "^2.0.1",
 		"svelte-sonner": "^0.3.28",
-		"sveltekit-superforms": "^2.20.0"
+		"sveltekit-superforms": "^2.20.0",
+		"uuid": "^11.0.2"
 	},
 	"devDependencies": {
 		"@kksh/types": "workspace:*",
@@ -42,6 +45,8 @@
 		"@tailwindcss/typography": "^0.5.15",
 		"@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",
@@ -52,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 e6ee94e..f6b3a01 100644
--- a/apps/desktop/src/lib/cmds/builtin.ts
+++ b/apps/desktop/src/lib/cmds/builtin.ts
@@ -1,7 +1,12 @@
-import { appState } from "@/stores"
+import { appConfig, appState, auth } from "@/stores"
+import { checkUpdateAndInstall } from "@/utils/updater"
 import type { BuiltinCmd } from "@kksh/ui/types"
-import { dev } from "$app/environment"
+import { getVersion } from "@tauri-apps/api/app"
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow"
+import { exit } from "@tauri-apps/plugin-process"
 import { goto } from "$app/navigation"
+import { toast } from "svelte-sonner"
+import { v4 as uuidv4 } from "uuid"
 
 export const builtinCmds: BuiltinCmd[] = [
 	{
@@ -13,58 +18,59 @@ export const builtinCmds: BuiltinCmd[] = [
 			goto("/extension/store")
 		}
 	},
-	// {
-	// 	name: "Sign In",
-	// 	iconifyIcon: "mdi:login-variant",
-	// 	description: "",
-	// 	function: async () => {
-	// 		goto("/auth")
-	// 	}
-	// },
-	// {
-	// 	name: "Sign Out",
-	// 	iconifyIcon: "mdi:logout-variant",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const supabase = useSupabaseClient()
-	// 		supabase.auth.signOut()
-	// 	}
-	// },
-	// {
-	// 	name: "Show Draggable Area",
-	// 	iconifyIcon: "mingcute:move-fill",
-	// 	description: "",
-	// 	function: async () => {
-	// 		// select all html elements with attribute data-tauri-drag-region
-	// 		const elements = document.querySelectorAll("[data-tauri-drag-region]")
-	// 		elements.forEach((el) => {
-	// 			el.classList.add("bg-red-500/30")
-	// 		})
-	// 		setTimeout(() => {
-	// 			elements.forEach((el) => {
-	// 				el.classList.remove("bg-red-500/30")
-	// 			})
-	// 		}, 2_000)
-	// 	}
-	// },
-	// {
-	// 	name: "Add Dev Extension",
-	// 	iconifyIcon: "lineicons:dev",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/add-dev-ext")
-	// 	}
-	// },
-	// {
-	// 	name: "Kunkun Version",
-	// 	iconifyIcon: "stash:version-solid",
-	// 	description: "",
-	// 	function: async () => {
-	// 		toast.success(`Kunkun Version: ${await getVersion()}`)
-	// 	}
-	// },
+	{
+		name: "Sign In",
+		iconifyIcon: "mdi:login-variant",
+		description: "",
+		function: async () => {
+			goto("/auth")
+		}
+	},
+	{
+		name: "Sign Out",
+		iconifyIcon: "mdi:logout-variant",
+		description: "",
+		function: async () => {
+			auth
+				.signOut()
+				.then(() => toast.success("Signed out"))
+				.catch((err) => toast.error("Failed to sign out: ", { description: err.message }))
+		}
+	},
+	{
+		name: "Show Draggable Area",
+		iconifyIcon: "mingcute:move-fill",
+		description: "",
+		function: async () => {
+			// select all html elements with attribute data-tauri-drag-region
+			const elements = document.querySelectorAll("[data-tauri-drag-region]")
+			elements.forEach((el) => {
+				el.classList.add("bg-red-500/30")
+			})
+			setTimeout(() => {
+				elements.forEach((el) => {
+					el.classList.remove("bg-red-500/30")
+				})
+			}, 2_000)
+		}
+	},
+	{
+		name: "Add Dev Extension",
+		iconifyIcon: "lineicons:dev",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/settings/add-dev-extension")
+		}
+	},
+	{
+		name: "Kunkun Version",
+		iconifyIcon: "stash:version-solid",
+		description: "",
+		function: async () => {
+			toast.success(`Kunkun Version: ${await getVersion()}`)
+		}
+	},
 	{
 		name: "Set Dev Extension Path",
 		iconifyIcon: "lineicons:dev",
@@ -75,52 +81,48 @@ export const builtinCmds: BuiltinCmd[] = [
 			goto("/settings/set-dev-ext-path")
 		}
 	},
-	// {
-	// 	name: "Extension Window Troubleshooter",
-	// 	iconifyIcon: "material-symbols:window-outline",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		// goto("/window-troubleshooter")
-	// 		const winLabel = `main:window-troubleshooter-${uuidv4()}`
-	// 		console.log(winLabel)
-	// 		new WebviewWindow(winLabel, {
-	// 			url: "/window-troubleshooter",
-	// 			title: "Window Troubleshooter"
-	// 		})
-	// 	}
-	// },
-	// {
-	// 	name: "Extension Permission Inspector",
-	// 	iconifyIcon: "hugeicons:inspect-code",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/ext-permission-inspector")
-	// 	}
-	// },
-	// {
-	// 	name: "Extension Loading Troubleshooter",
-	// 	iconifyIcon: "material-symbols:troubleshoot",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/extension-load-troubleshooter")
-	// 	}
-	// },
-	// {
-	// 	name: "Create Quicklink",
-	// 	iconifyIcon: "material-symbols:link",
-	// 	description: "Create a Quicklink",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/create-quicklink")
-	// 	}
-	// },
+	{
+		name: "Extension Window Troubleshooter",
+		iconifyIcon: "material-symbols:window-outline",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			// goto("/window-troubleshooter")
+			const winLabel = `main:extension-window-troubleshooter-${uuidv4()}`
+			console.log(winLabel)
+			new WebviewWindow(winLabel, {
+				url: "/troubleshooters/extension-window",
+				title: "Extension Window Troubleshooter"
+			})
+		}
+	},
+	{
+		name: "Extension Permission Inspector",
+		iconifyIcon: "hugeicons:inspect-code",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/extension/permission-inspector")
+		}
+	},
+	{
+		name: "Extension Loading Troubleshooter",
+		iconifyIcon: "material-symbols:troubleshoot",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/troubleshooters/extension-loading")
+		}
+	},
+	{
+		name: "Create Quicklink",
+		iconifyIcon: "material-symbols:link",
+		description: "Create a Quicklink",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/extension/create-quick-link")
+		}
+	},
 	// {
 	// 	name: "Settings",
 	// 	iconifyIcon: "solar:settings-linear",
@@ -143,30 +145,32 @@ export const builtinCmds: BuiltinCmd[] = [
 	// 		appStateStore.setSearchTermSync("")
 	// 	}
 	// },
-	// {
-	// 	name: "Check Update",
-	// 	iconifyIcon: "material-symbols:update",
-	// 	description: "Check for updates",
-	// 	function: async () => {
-	// 		checkUpdateAndInstall()
-	// 	}
-	// },
-	// {
-	// 	name: "Check Beta Update",
-	// 	iconifyIcon: "material-symbols:update",
-	// 	description: "Check for Beta updates",
-	// 	function: async () => {
-	// 		checkUpdateAndInstall(true)
-	// 	}
-	// },
-	// {
-	// 	name: "Reload",
-	// 	iconifyIcon: "tabler:reload",
-	// 	description: "Reload this page",
-	// 	function: async () => {
-	// 		location.reload()
-	// 	}
-	// },
+	{
+		name: "Check Update",
+		iconifyIcon: "material-symbols:update",
+		description: "Check for updates",
+		function: async () => {
+			checkUpdateAndInstall()
+			appState.clearSearchTerm()
+		}
+	},
+	{
+		name: "Check Beta Update",
+		iconifyIcon: "material-symbols:update",
+		description: "Check for Beta updates",
+		function: async () => {
+			checkUpdateAndInstall({ beta: true })
+			appState.clearSearchTerm()
+		}
+	},
+	{
+		name: "Reload",
+		iconifyIcon: "tabler:reload",
+		description: "Reload this page",
+		function: async () => {
+			location.reload()
+		}
+	},
 	{
 		name: "Dance",
 		iconifyIcon: "mdi:dance-pole",
@@ -174,33 +178,43 @@ export const builtinCmds: BuiltinCmd[] = [
 		function: async () => {
 			goto("/dance")
 		}
+	},
+	{
+		name: "Quit Kunkun",
+		iconifyIcon: "emojione:cross-mark-button",
+		description: "Quit Kunkun",
+		function: async () => {
+			exit(0)
+		}
+	},
+	{
+		name: "Toggle Dev Extension HMR",
+		iconifyIcon: "ri:toggle-line",
+		description: "Load dev extensions from their dev server URLs",
+		function: async () => {
+			appConfig.update((config) => {
+				toast.success(`Dev Extension HMR toggled to: ${!config.hmr}`)
+				return {
+					...config,
+					hmr: !config.hmr
+				}
+			})
+			appState.clearSearchTerm()
+		}
+	},
+	{
+		name: "Toggle Hide On Blur",
+		iconifyIcon: "ri:toggle-line",
+		description: "Toggle Hide On Blur",
+		function: async () => {
+			appConfig.update((config) => {
+				toast.success(`"Hide on Blur" toggled to: ${!config.hideOnBlur}`)
+				return {
+					...config,
+					hideOnBlur: !config.hideOnBlur
+				}
+			})
+			appState.clearSearchTerm()
+		}
 	}
-	// {
-	// 	name: "Quit Kunkun",
-	// 	iconifyIcon: "emojione:cross-mark-button",
-	// 	description: "Quit Kunkun",
-	// 	function: async () => {
-	// 		exit(0)
-	// 	}
-	// },
-	// {
-	// 	name: "Toggle Dev Extension Live Load Mode",
-	// 	iconifyIcon: "ri:toggle-line",
-	// 	description: "Load dev extensions from their dev server URLs",
-	// 	function: async () => {
-	// 		toggleDevExtensionLiveLoadMode()
-	// 	}
-	// },
-	// {
-	// 	name: "Toggle Hide On Blur",
-	// 	iconifyIcon: "ri:toggle-line",
-	// 	description: "Toggle Hide On Blur",
-	// 	function: async () => {
-	// 		const appConfig = useAppConfigStore()
-	// 		appConfig.setHideOnBlur(!appConfig.hideOnBlur)
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		toast.success(`"Hide on Blur" toggled to: ${appConfig.hideOnBlur}`)
-	// 	}
-	// }
 ]
diff --git a/apps/desktop/src/lib/cmds/ext.ts b/apps/desktop/src/lib/cmds/ext.ts
index 68fb4b6..1aede5c 100644
--- a/apps/desktop/src/lib/cmds/ext.ts
+++ b/apps/desktop/src/lib/cmds/ext.ts
@@ -1,14 +1,12 @@
+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)
@@ -23,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(
@@ -31,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
 
@@ -48,14 +58,14 @@ export async function onCustomUiCmdSelect(
 		})
 		console.log("Launch new window, ", winLabel)
 		const window = launchNewExtWindow(winLabel, url2, cmd.window)
+		window.onCloseRequested(async (event) => {
+			await winExtMap.unregisterExtensionFromWindow(winLabel)
+		})
 	} 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/cmds/index.ts b/apps/desktop/src/lib/cmds/index.ts
index 3efc68d..a845ef1 100644
--- a/apps/desktop/src/lib/cmds/index.ts
+++ b/apps/desktop/src/lib/cmds/index.ts
@@ -2,6 +2,7 @@ import { CmdTypeEnum, CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@k
 import type { CommandLaunchers, OnExtCmdSelect } from "@kksh/ui/types"
 import * as v from "valibot"
 import { onCustomUiCmdSelect, onTemplateUiCmdSelect } from "./ext"
+import { onQuickLinkSelect } from "./quick-links"
 
 const onExtCmdSelect: OnExtCmdSelect = (
 	ext: ExtPackageJsonExtra,
@@ -20,4 +21,4 @@ const onExtCmdSelect: OnExtCmdSelect = (
 	}
 }
 
-export const commandLaunchers = { onExtCmdSelect } satisfies CommandLaunchers
+export const commandLaunchers = { onExtCmdSelect, onQuickLinkSelect } satisfies CommandLaunchers
diff --git a/apps/desktop/src/lib/cmds/quick-links.ts b/apps/desktop/src/lib/cmds/quick-links.ts
new file mode 100644
index 0000000..43662a4
--- /dev/null
+++ b/apps/desktop/src/lib/cmds/quick-links.ts
@@ -0,0 +1,25 @@
+import { appState } from "@/stores"
+import type { CmdQuery, CmdValue } from "@kksh/ui/types"
+import { open } from "tauri-plugin-shellx-api"
+
+/**
+ * Given some link like https://google.com/search?q={argument}&query={query}
+ * Find {argument} and {query}
+ */
+export function findAllArgsInLink(link: string): string[] {
+	const regex = /\{([^}]+)\}/g
+	const matches = [...link.matchAll(regex)]
+	return matches.map((match) => match[1])
+}
+
+export function onQuickLinkSelect(quickLink: CmdValue, queries: CmdQuery[]) {
+	console.log(quickLink, queries)
+	let qlink = quickLink.data
+	for (const arg of queries) {
+		console.log(`replace all {${arg.name}} with ${arg.value}`)
+		qlink = qlink.replaceAll(`{${arg.name}}`, arg.value)
+	}
+	appState.clearSearchTerm()
+	console.log(qlink)
+	open(qlink)
+}
diff --git a/apps/desktop/src/lib/cmds/system.ts b/apps/desktop/src/lib/cmds/system.ts
new file mode 100644
index 0000000..cd7221f
--- /dev/null
+++ b/apps/desktop/src/lib/cmds/system.ts
@@ -0,0 +1,4 @@
+import { getSystemCommands } from "@kksh/api/commands"
+import type { SysCommand } from "@kksh/api/models"
+
+export const systemCommands: SysCommand[] = getSystemCommands()
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/main/CommandPalette.svelte b/apps/desktop/src/lib/components/main/CommandPalette.svelte
deleted file mode 100644
index 8e117e4..0000000
--- a/apps/desktop/src/lib/components/main/CommandPalette.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<!-- This file renders the main command palette, a list of commands -->
-<!-- This is not placed in @kksh/ui because it depends on the app config and is very complex, 
-passing everything through props will be very complicated and hard to maintain.
--->
-<script lang="ts">
-	import { devStoreExts, installedStoreExts } from "@/stores"
-	import type { ExtPackageJsonExtra } from "@kksh/api/models"
-	import { isExtPathInDev } from "@kksh/extension/utils"
-	import { Command } from "@kksh/svelte5"
-	import type { AppConfig, AppState } from "@kksh/types"
-	import {
-		BuiltinCmds,
-		CustomCommandInput,
-		ExtCmdsGroup,
-		GlobalCommandPaletteFooter
-	} from "@kksh/ui/main"
-	import type { BuiltinCmd, CommandLaunchers } from "@kksh/ui/types"
-	import { cn } from "@kksh/ui/utils"
-	import type { Writable } from "svelte/store"
-
-	const {
-		extensions,
-		appConfig,
-		class: className,
-		commandLaunchers,
-		appState,
-		builtinCmds
-	}: {
-		extensions: ExtPackageJsonExtra[]
-		appConfig: Writable<AppConfig>
-		class?: string
-		commandLaunchers: CommandLaunchers
-		appState: Writable<AppState>
-		builtinCmds: BuiltinCmd[]
-	} = $props()
-</script>
-
-<Command.Root
-	class={cn("rounded-lg border shadow-md", className)}
-	bind:value={$appState.highlightedCmd}
-	loop
->
-	<CustomCommandInput
-		autofocus
-		placeholder="Type a command or search..."
-		bind:value={$appState.searchTerm}
-	/>
-	<Command.List class="max-h-screen grow">
-		<Command.Empty data-tauri-drag-region>No results found.</Command.Empty>
-		<BuiltinCmds {builtinCmds} />
-		{#if $appConfig.extensionPath && $devStoreExts.length > 0}
-			<ExtCmdsGroup
-				extensions={$devStoreExts}
-				heading="Dev Extensions"
-				isDev={true}
-				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
-				hmr={$appConfig.hmr}
-			/>
-		{/if}
-		{#if $appConfig.extensionPath && $installedStoreExts.length > 0}
-			<ExtCmdsGroup
-				extensions={$installedStoreExts}
-				heading="Extensions"
-				isDev={false}
-				hmr={false}
-				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
-			/>
-		{/if}
-		<Command.Separator />
-	</Command.List>
-	<GlobalCommandPaletteFooter />
-</Command.Root>
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/appConfig.ts b/apps/desktop/src/lib/stores/appConfig.ts
index aa50558..78ebcd0 100644
--- a/apps/desktop/src/lib/stores/appConfig.ts
+++ b/apps/desktop/src/lib/stores/appConfig.ts
@@ -1,12 +1,10 @@
 import { getExtensionsFolder } from "@/constants"
-import { themeConfigStore, updateTheme, type ThemeConfig } from "@kksh/svelte5"
+import { createTauriSyncStore, type WithSyncStore } from "@/utils/sync-store"
+import { updateTheme, type ThemeConfig } from "@kksh/svelte5"
 import { PersistedAppConfig, type AppConfig } from "@kksh/types"
-import * as path from "@tauri-apps/api/path"
-import { remove } from "@tauri-apps/plugin-fs"
 import { debug, error } from "@tauri-apps/plugin-log"
 import * as os from "@tauri-apps/plugin-os"
 import { load } from "@tauri-apps/plugin-store"
-import { get, writable, type Writable } from "svelte/store"
 import * as v from "valibot"
 
 export const defaultAppConfig: AppConfig = {
@@ -21,7 +19,7 @@ export const defaultAppConfig: AppConfig = {
 	launchAtLogin: true,
 	showInTray: true,
 	devExtensionPath: null,
-	extensionPath: undefined,
+	extensionsInstallDir: undefined,
 	hmr: false,
 	hideOnBlur: true,
 	extensionAutoUpgrade: true,
@@ -35,25 +33,22 @@ interface AppConfigAPI {
 	setDevExtensionPath: (devExtensionPath: string | null) => void
 }
 
-function createAppConfig(): Writable<AppConfig> & AppConfigAPI {
-	const { subscribe, update, set } = writable<AppConfig>(defaultAppConfig)
+function createAppConfig(): WithSyncStore<AppConfig> & AppConfigAPI {
+	const store = createTauriSyncStore("app-config", defaultAppConfig)
 
 	async function init() {
 		debug("Initializing app config")
-		const appDataDir = await path.appDataDir()
-		// const appConfigPath = await path.join(appDataDir, "appConfig.json")
-		// debug(`appConfigPath: ${appConfigPath}`)
 		const persistStore = await load("kk-config.json", { autoSave: true })
 		const loadedConfig = await persistStore.get("config")
 		const parseRes = v.safeParse(PersistedAppConfig, loadedConfig)
 		if (parseRes.success) {
 			console.log("Parse Persisted App Config Success", parseRes.output)
-			const extensionPath = await path.join(appDataDir, "extensions")
-			update((config) => ({
+			const extensionsInstallDir = await getExtensionsFolder()
+			store.update((config) => ({
 				...config,
 				...parseRes.output,
 				isInitialized: true,
-				extensionPath,
+				extensionsInstallDir,
 				platform: os.platform()
 			}))
 		} else {
@@ -63,7 +58,7 @@ function createAppConfig(): Writable<AppConfig> & AppConfigAPI {
 			await persistStore.set("config", v.parse(PersistedAppConfig, defaultAppConfig))
 		}
 
-		subscribe(async (config) => {
+		store.subscribe(async (config) => {
 			console.log("Saving app config", config)
 			await persistStore.set("config", config)
 			updateTheme(config.theme)
@@ -71,15 +66,13 @@ function createAppConfig(): Writable<AppConfig> & AppConfigAPI {
 	}
 
 	return {
-		setTheme: (theme: ThemeConfig) => update((config) => ({ ...config, theme })),
+		...store,
+		setTheme: (theme: ThemeConfig) => store.update((config) => ({ ...config, theme })),
 		setDevExtensionPath: (devExtensionPath: string | null) => {
 			console.log("setDevExtensionPath", devExtensionPath)
-			update((config) => ({ ...config, devExtensionPath }))
+			store.update((config) => ({ ...config, devExtensionPath }))
 		},
-		init,
-		subscribe,
-		update,
-		set
+		init
 	}
 }
 
diff --git a/apps/desktop/src/lib/stores/appState.ts b/apps/desktop/src/lib/stores/appState.ts
index aaaf45d..d45c87a 100644
--- a/apps/desktop/src/lib/stores/appState.ts
+++ b/apps/desktop/src/lib/stores/appState.ts
@@ -1,26 +1,42 @@
-import type { AppState } from "@/types"
-import { get, writable, type Writable } from "svelte/store"
+import { findAllArgsInLink } from "@/cmds/quick-links"
+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 {
 	const store = writable<AppState>(defaultAppState)
 
 	return {
-		subscribe: store.subscribe,
-		update: store.update,
-		set: store.set,
+		...store,
 		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 }))
 		}
 	}
 }
diff --git a/apps/desktop/src/lib/stores/auth.ts b/apps/desktop/src/lib/stores/auth.ts
new file mode 100644
index 0000000..c88e3bd
--- /dev/null
+++ b/apps/desktop/src/lib/stores/auth.ts
@@ -0,0 +1,47 @@
+import { supabase } from "@/supabase"
+import type { AuthError, Session, User } from "@supabase/supabase-js"
+import { get, writable, type Writable } from "svelte/store"
+
+type State = { session: Session | null; user: User | null }
+
+interface AuthAPI {
+	get: () => State
+	refresh: () => Promise<void>
+	signOut: () => Promise<{ error: AuthError | null }>
+	signInExchange: (code: string) => Promise<{ error: AuthError | null }>
+}
+
+function createAuth(): Writable<State> & AuthAPI {
+	const store = writable<State>({ session: null, user: null })
+	async function refresh() {
+		const {
+			data: { session },
+			error
+		} = await supabase.auth.getSession()
+		const {
+			data: { user }
+		} = await supabase.auth.getUser()
+		store.update((state) => ({ ...state, session, user }))
+	}
+	async function signOut() {
+		return supabase.auth.signOut().then((res) => {
+			refresh()
+			return res
+		})
+	}
+	async function signInExchange(code: string) {
+		return supabase.auth.exchangeCodeForSession(code).then((res) => {
+			refresh()
+			return res
+		})
+	}
+	return {
+		...store,
+		get: () => get(store),
+		refresh,
+		signOut,
+		signInExchange
+	}
+}
+
+export const auth = createAuth()
diff --git a/apps/desktop/src/lib/stores/cmdQuery.ts b/apps/desktop/src/lib/stores/cmdQuery.ts
new file mode 100644
index 0000000..18bcb01
--- /dev/null
+++ b/apps/desktop/src/lib/stores/cmdQuery.ts
@@ -0,0 +1,23 @@
+import { findAllArgsInLink } from "@/cmds/quick-links"
+import { CmdTypeEnum } from "@kksh/api/models"
+import type { CmdQuery, CmdValue } from "@kksh/ui/main"
+import { derived, get, writable, type Writable } from "svelte/store"
+import { appState } from "./appState"
+
+function createCmdQueryStore(): Writable<CmdQuery[]> {
+	const store = writable<CmdQuery[]>([])
+	appState.subscribe(($appState) => {
+		if ($appState.highlightedCmd.startsWith("{")) {
+			const parsedCmd = JSON.parse($appState.highlightedCmd) as CmdValue
+			if (parsedCmd.cmdType === CmdTypeEnum.QuickLink && parsedCmd.data) {
+				return store.set(findAllArgsInLink(parsedCmd.data).map((arg) => ({ name: arg, value: "" })))
+			}
+		}
+		store.set([])
+	})
+	return {
+		...store
+	}
+}
+
+export const cmdQueries = createCmdQueryStore()
diff --git a/apps/desktop/src/lib/stores/extensions.ts b/apps/desktop/src/lib/stores/extensions.ts
index 0bcb1a4..770ed2a 100644
--- a/apps/desktop/src/lib/stores/extensions.ts
+++ b/apps/desktop/src/lib/stores/extensions.ts
@@ -10,22 +10,25 @@ 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>
 	upgradeStoreExtension: (identifier: string, tarballUrl: string) => Promise<ExtPackageJsonExtra>
 } {
-	const { subscribe, update, set } = writable<ExtPackageJsonExtra[]>([])
+	const store = writable<ExtPackageJsonExtra[]>([])
 
 	function init() {
 		return extAPI.loadAllExtensionsFromDb().then((exts) => {
-			set(exts)
+			store.set(exts)
 		})
 	}
 
 	function getExtensionsFromStore() {
-		const extContainerPath = get(appConfig).extensionPath
+		const extContainerPath = get(appConfig).extensionsInstallDir
 		if (!extContainerPath) return []
 		return get(extensions).filter((ext) => !extAPI.isExtPathInDev(extContainerPath, ext.extPath))
 	}
@@ -43,7 +46,7 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 		return extAPI
 			.loadExtensionManifestFromDisk(await path.join(extPath, "package.json"))
 			.then((ext) => {
-				update((exts) => {
+				store.update((exts) => {
 					const existingExt = exts.find((e) => e.extPath === ext.extPath)
 					if (existingExt) return exts
 					return [...exts, ext]
@@ -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`)
@@ -69,7 +96,7 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 
 		return extAPI
 			.uninstallExtensionByPath(targetPath)
-			.then(() => update((exts) => exts.filter((ext) => ext.extPath !== targetExt.extPath)))
+			.then(() => store.update((exts) => exts.filter((ext) => ext.extPath !== targetExt.extPath)))
 			.then(() => targetExt)
 	}
 
@@ -83,7 +110,7 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 		identifier: string,
 		tarballUrl: string
 	): Promise<ExtPackageJsonExtra> {
-		const extsDir = get(appConfig).extensionPath
+		const extsDir = get(appConfig).extensionsInstallDir
 		if (!extsDir) throw new Error("Extension path not set")
 		return uninstallStoreExtensionByIdentifier(identifier).then(() =>
 			installFromTarballUrl(tarballUrl, extsDir)
@@ -91,16 +118,17 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 	}
 
 	return {
+		...store,
 		init,
 		getExtensionsFromStore,
 		findStoreExtensionByIdentifier,
 		registerNewExtensionByPath,
+		installTarball,
+		installDevExtensionDir,
 		installFromTarballUrl,
+		installFromNpmPackageName,
 		uninstallStoreExtensionByIdentifier,
-		upgradeStoreExtension,
-		subscribe,
-		update,
-		set
+		upgradeStoreExtension
 	}
 }
 
@@ -109,7 +137,7 @@ export const extensions = createExtensionsStore()
 export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 	extensions,
 	($extensionsStore) => {
-		const extContainerPath = get(appConfig).extensionPath
+		const extContainerPath = get(appConfig).extensionsInstallDir
 		if (!extContainerPath) return []
 		return $extensionsStore.filter((ext) => !extAPI.isExtPathInDev(extContainerPath, ext.extPath))
 	}
@@ -117,7 +145,7 @@ export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 export const devStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 	extensions,
 	($extensionsStore) => {
-		const extContainerPath = get(appConfig).extensionPath
+		const extContainerPath = get(appConfig).extensionsInstallDir
 		if (!extContainerPath) return []
 		return $extensionsStore.filter((ext) => extAPI.isExtPathInDev(extContainerPath, ext.extPath))
 	}
diff --git a/apps/desktop/src/lib/stores/index.ts b/apps/desktop/src/lib/stores/index.ts
index daaa348..141acbc 100644
--- a/apps/desktop/src/lib/stores/index.ts
+++ b/apps/desktop/src/lib/stores/index.ts
@@ -2,3 +2,5 @@ export * from "./appConfig"
 export * from "./appState"
 export * from "./winExtMap"
 export * from "./extensions"
+export * from "./auth"
+export * from "./quick-links"
diff --git a/apps/desktop/src/lib/stores/quick-links.ts b/apps/desktop/src/lib/stores/quick-links.ts
new file mode 100644
index 0000000..e265ca4
--- /dev/null
+++ b/apps/desktop/src/lib/stores/quick-links.ts
@@ -0,0 +1,39 @@
+import type { Icon } from "@kksh/api/models"
+import { createQuickLinkCommand, getAllQuickLinkCommands } from "@kksh/extension/db"
+import type { CmdQuery, QuickLink } from "@kksh/ui/types"
+import { get, writable, type Writable } from "svelte/store"
+
+export interface QuickLinkAPI {
+	get: () => QuickLink[]
+	init: () => Promise<void>
+	refresh: () => Promise<void>
+	createQuickLink: (name: string, link: string, icon: Icon) => Promise<void>
+}
+
+function createQuickLinksStore(): Writable<QuickLink[]> & QuickLinkAPI {
+	const store = writable<QuickLink[]>([])
+
+	async function init() {
+		refresh()
+	}
+
+	async function refresh() {
+		const cmds = await getAllQuickLinkCommands()
+		store.set(cmds.map((cmd) => ({ link: cmd.data.link, name: cmd.name, icon: cmd.data.icon })))
+	}
+
+	async function createQuickLink(name: string, link: string, icon: Icon) {
+		await createQuickLinkCommand(name, link, icon)
+		await refresh()
+	}
+
+	return {
+		...store,
+		get: () => get(store),
+		init,
+		refresh,
+		createQuickLink
+	}
+}
+
+export const quickLinks = createQuickLinksStore()
diff --git a/apps/desktop/src/lib/stores/winExtMap.ts b/apps/desktop/src/lib/stores/winExtMap.ts
index 7b5cd5f..2bea26a 100644
--- a/apps/desktop/src/lib/stores/winExtMap.ts
+++ b/apps/desktop/src/lib/stores/winExtMap.ts
@@ -40,6 +40,7 @@ function createWinExtMapStore(): Writable<WinExtMap> & API {
 	async function init() {}
 
 	return {
+		...store,
 		init,
 		registerExtensionWithWindow: async ({
 			extPath,
@@ -58,11 +59,11 @@ function createWinExtMapStore(): Writable<WinExtMap> & API {
 					await killProcesses(winExtMap[windowLabel].pids)
 					delete winExtMap[windowLabel]
 				} else {
-					winExtMap[windowLabel] = {
-						windowLabel,
-						extPath,
-						pids: []
-					}
+					// winExtMap[windowLabel] = {
+					// 	windowLabel,
+					// 	extPath,
+					// 	pids: []
+					// }
 				}
 			}
 			const returnedWinLabel = await registerExtensionWindow({
@@ -70,6 +71,11 @@ function createWinExtMapStore(): Writable<WinExtMap> & API {
 				windowLabel,
 				dist
 			})
+			winExtMap[returnedWinLabel] = {
+				windowLabel: returnedWinLabel,
+				extPath,
+				pids: []
+			}
 			store.set(winExtMap)
 			return returnedWinLabel
 		},
@@ -109,10 +115,7 @@ function createWinExtMapStore(): Writable<WinExtMap> & API {
 			return unregisterExtensionSpawnedProcess(windowLabel, pid).then(() => {
 				ext.pids = ext.pids.filter((p) => p !== pid)
 			})
-		},
-		subscribe: store.subscribe,
-		update: store.update,
-		set: store.set
+		}
 	}
 }
 
diff --git a/apps/desktop/src/lib/utils/deeplink.ts b/apps/desktop/src/lib/utils/deeplink.ts
new file mode 100644
index 0000000..11bcc7f
--- /dev/null
+++ b/apps/desktop/src/lib/utils/deeplink.ts
@@ -0,0 +1,115 @@
+import { emitRefreshDevExt } from "@/utils/tauri-events"
+import {
+	DEEP_LINK_PATH_AUTH_CONFIRM,
+	DEEP_LINK_PATH_OPEN,
+	DEEP_LINK_PATH_REFRESH_DEV_EXTENSION,
+	DEEP_LINK_PATH_STORE
+} from "@kksh/api"
+import type { UnlistenFn } from "@tauri-apps/api/event"
+import { extname } from "@tauri-apps/api/path"
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+import * as deepLink from "@tauri-apps/plugin-deep-link"
+import { error } from "@tauri-apps/plugin-log"
+import { goto } from "$app/navigation"
+import { toast } from "svelte-sonner"
+import * as v from "valibot"
+import { isInMainWindow } from "./window"
+
+const StorePathSearchParams = v.object({
+	identifier: v.optional(v.string())
+})
+
+export function initDeeplink(): Promise<UnlistenFn> {
+	console.log("init deeplink")
+	if (!isInMainWindow()) {
+		return Promise.resolve(() => {})
+	}
+	// deepLink.getCurrent()
+	return deepLink.onOpenUrl((urls) => {
+		console.log("deep link:", urls)
+		urls.forEach(handleDeepLink)
+	})
+}
+
+/**
+ * Show and focus on the main window
+ */
+function openMainWindow() {
+	const appWindow = getCurrentWebviewWindow()
+	return appWindow
+		.show()
+		.then(() => appWindow.setFocus())
+		.catch((err) => {
+			console.error(err)
+			error(`Failed to show window upon deep link: ${err.message}`)
+			toast.error("Failed to show window upon deep link", {
+				description: err.message
+			})
+		})
+}
+
+export async function handleKunkunProtocol(parsedUrl: URL) {
+	const params = Object.fromEntries(parsedUrl.searchParams)
+	const { host, pathname, href } = parsedUrl
+	if (href.startsWith(DEEP_LINK_PATH_OPEN)) {
+		openMainWindow()
+	} else if (href.startsWith(DEEP_LINK_PATH_STORE)) {
+		const parsed = v.parse(StorePathSearchParams, params)
+		openMainWindow()
+		if (parsed.identifier) {
+			goto(`/extension/store/${parsed.identifier}`)
+		} else {
+			goto("/extension/store")
+		}
+	} else if (href.startsWith(DEEP_LINK_PATH_REFRESH_DEV_EXTENSION)) {
+		emitRefreshDevExt()
+	} else if (href.startsWith(DEEP_LINK_PATH_AUTH_CONFIRM)) {
+		openMainWindow()
+		goto(`/auth/confirm?${parsedUrl.searchParams.toString()}`)
+	} else {
+		console.error("Invalid path:", pathname)
+		toast.error("Invalid path", {
+			description: parsedUrl.href
+		})
+	}
+}
+
+export async function handleFileProtocol(parsedUrl: URL) {
+	console.log("File protocol:", parsedUrl)
+	const filePath = parsedUrl.pathname // Remove the leading '//' kunkun://open?identifier=qrcode gives "open"
+	console.log("File path:", filePath)
+	// from file absolute path, get file extension
+	const fileExt = await extname(filePath)
+	console.log("File extension:", fileExt)
+	switch (fileExt) {
+		case "kunkun":
+			// TODO: Handle file protocol, install extension from file (essentially a .tgz file)
+			break
+		default:
+			console.error("Unknown file extension:", fileExt)
+			toast.error("Unknown file extension", {
+				description: fileExt
+			})
+			break
+	}
+}
+
+/**
+ *
+ * @param url Deep Link URl, e.g. kunkun://open
+ */
+export async function handleDeepLink(url: string) {
+	const parsedUrl = new URL(url)
+	switch (parsedUrl.protocol) {
+		case "kunkun:":
+			return handleKunkunProtocol(parsedUrl)
+		case "file:":
+			return handleFileProtocol(parsedUrl)
+		default:
+			console.error("Invalid Protocol:", parsedUrl.protocol)
+			toast.error("Invalid Protocol", {
+				description: parsedUrl.protocol
+			})
+			break
+	}
+}
diff --git a/apps/desktop/src/lib/utils/dom.ts b/apps/desktop/src/lib/utils/dom.ts
new file mode 100644
index 0000000..36bcfa6
--- /dev/null
+++ b/apps/desktop/src/lib/utils/dom.ts
@@ -0,0 +1,3 @@
+export function getActiveElementNodeName(): string | undefined {
+	return document.activeElement?.nodeName
+}
diff --git a/apps/desktop/src/lib/utils/key.ts b/apps/desktop/src/lib/utils/key.ts
index 62f16f1..61e9527 100644
--- a/apps/desktop/src/lib/utils/key.ts
+++ b/apps/desktop/src/lib/utils/key.ts
@@ -23,3 +23,13 @@ export function goBackOnEscapeClearSearchTerm(e: KeyboardEvent) {
 		}
 	}
 }
+
+export function goHomeOnEscapeClearSearchTerm(e: KeyboardEvent) {
+	if (e.key === "Escape") {
+		if (appState.get().searchTerm) {
+			appState.clearSearchTerm()
+		} else {
+			goHome()
+		}
+	}
+}
diff --git a/apps/desktop/src/lib/utils/sync-store.ts b/apps/desktop/src/lib/utils/sync-store.ts
new file mode 100644
index 0000000..667f6a5
--- /dev/null
+++ b/apps/desktop/src/lib/utils/sync-store.ts
@@ -0,0 +1,44 @@
+import * as evt from "@tauri-apps/api/event"
+import { writable, type Writable } from "svelte/store"
+
+export function buildEventName(storeName: string) {
+	return `app://sync-store-${storeName}`
+}
+
+export type WithSyncStore<T> = Writable<T> & {
+	listen: () => void
+	unlisten: evt.UnlistenFn | undefined
+}
+
+export function createTauriSyncStore<T>(storeName: string, initialValue: T): WithSyncStore<T> {
+	const store = writable<T>(initialValue)
+	let unlisten: evt.UnlistenFn | undefined
+
+	async function listen() {
+		console.log("[listen] start", storeName)
+		if (unlisten) {
+			console.log("[listen] already listening, skip")
+			return
+		}
+		const _unlisten = await evt.listen<{ value: T }>(buildEventName(storeName), (evt) => {
+			console.log(`[listen] update from tauri event`, storeName, evt.payload.value)
+			store.set(evt.payload.value)
+		})
+		const unsubscribe = store.subscribe((value) => {
+			console.log("[subscribe] got update, emit data", storeName, value)
+			evt.emit(buildEventName(storeName), { value })
+		})
+		unlisten = () => {
+			_unlisten()
+			unsubscribe()
+			unlisten = undefined
+		}
+		return unlisten
+	}
+
+	return {
+		...store,
+		listen,
+		unlisten
+	}
+}
diff --git a/apps/desktop/src/lib/utils/tauri-events.ts b/apps/desktop/src/lib/utils/tauri-events.ts
new file mode 100644
index 0000000..1102342
--- /dev/null
+++ b/apps/desktop/src/lib/utils/tauri-events.ts
@@ -0,0 +1,57 @@
+import { DEEP_LINK_PATH_REFRESH_DEV_EXTENSION } from "@kksh/api"
+import {
+	emit,
+	emitTo,
+	listen,
+	TauriEvent,
+	type Event,
+	type EventCallback,
+	type UnlistenFn
+} from "@tauri-apps/api/event"
+
+export const FileDragDrop = "tauri://drag-drop"
+export const FileDragEnter = "tauri://drag-enter"
+export const FileDragLeave = "tauri://drag-leave"
+export const FileDragOver = "tauri://drag-over"
+export const NewClipboardItemAddedEvent = "new_clipboard_item_added"
+export const RefreshConfigEvent = "kunkun://refresh-config"
+export const RefreshExtEvent = "kunkun://refresh-extensions"
+export function listenToFileDrop(cb: EventCallback<{ paths: string[] }>) {
+	return listen<{ paths: string[] }>(FileDragDrop, cb)
+}
+
+export function listenToWindowBlur(cb: EventCallback<null>) {
+	return listen(TauriEvent.WINDOW_BLUR, cb)
+}
+
+export function listenToWindowFocus(cb: EventCallback<null>) {
+	return listen(TauriEvent.WINDOW_FOCUS, cb)
+}
+
+export function listenToNewClipboardItem(cb: EventCallback<null>) {
+	return listen(NewClipboardItemAddedEvent, cb)
+}
+
+export function emitRefreshConfig() {
+	return emit(RefreshConfigEvent)
+}
+
+export function listenToRefreshConfig(cb: EventCallback<null>) {
+	return listen(RefreshConfigEvent, cb)
+}
+
+export function emitRefreshExt() {
+	return emitTo("main", RefreshExtEvent)
+}
+
+export function listenToRefreshExt(cb: EventCallback<null>) {
+	return listen(RefreshExtEvent, cb)
+}
+
+export function emitRefreshDevExt() {
+	return emit(DEEP_LINK_PATH_REFRESH_DEV_EXTENSION)
+}
+
+export function listenToRefreshDevExt(cb: EventCallback<null>) {
+	return listen(DEEP_LINK_PATH_REFRESH_DEV_EXTENSION, cb)
+}
diff --git a/apps/desktop/src/lib/utils/updater.ts b/apps/desktop/src/lib/utils/updater.ts
new file mode 100644
index 0000000..17705b0
--- /dev/null
+++ b/apps/desktop/src/lib/utils/updater.ts
@@ -0,0 +1,88 @@
+import { extensions } from "@/stores"
+import { supabaseAPI } from "@/supabase"
+import { isCompatible } from "@kksh/api"
+import type { ExtPackageJsonExtra } from "@kksh/api/models"
+import { greaterThan } from "@std/semver"
+import { relaunch } from "@tauri-apps/plugin-process"
+import { check } from "@tauri-apps/plugin-updater"
+import { gt } from "semver"
+import { toast } from "svelte-sonner"
+import { get } from "svelte/store"
+
+export async function checkUpdateAndInstall({ beta }: { beta?: boolean } = {}) {
+	const update = await check({
+		headers: {
+			"kk-updater-mode": beta ? "beta" : "stable"
+		}
+	})
+	if (update?.available) {
+		const confirmUpdate = await confirm(
+			`A new version ${update.version} is available. Do you want to install and relaunch?`
+		)
+		if (confirmUpdate) {
+			await update.downloadAndInstall()
+			await relaunch()
+		}
+	} else {
+		toast.info("You are on the latest version")
+	}
+}
+
+export async function checkSingleExtensionUpdate(
+	installedExt: ExtPackageJsonExtra,
+	autoupgrade: boolean
+) {
+	const { data: sbExt, error } = await supabaseAPI.getLatestExtPublish(
+		installedExt.kunkun.identifier
+	)
+	if (error) {
+		return toast.error(`Failed to check update for ${installedExt.kunkun.identifier}: ${error}`)
+	}
+
+	if (!sbExt) {
+		return null
+	}
+
+	if (
+		gt(sbExt.version, installedExt.version) &&
+		(sbExt.api_version ? isCompatible(sbExt.api_version) : true)
+	) {
+		if (autoupgrade) {
+			await extensions
+				.upgradeStoreExtension(
+					sbExt.identifier,
+					supabaseAPI.translateExtensionFilePathToUrl(sbExt.tarball_path)
+				)
+				.then(() => {
+					toast.success(`${sbExt.name} upgraded`, {
+						description: `From ${installedExt.version} to ${sbExt.version}`
+					})
+				})
+				.catch((err) => {
+					toast.error(`Failed to upgrade ${sbExt.name}`, { description: err })
+				})
+			return true
+		} else {
+			console.log(`new version available ${installedExt.kunkun.identifier} ${sbExt.version}`)
+			toast.info(
+				`Extension ${installedExt.kunkun.identifier} has a new version ${sbExt.version}, you can upgrade in Store.`,
+				{ duration: 10_000 }
+			)
+		}
+	}
+	return false
+}
+
+export async function checkExtensionUpdate(autoupgrade: boolean = false) {
+	let upgradedCount = 0
+	for (const ext of get(extensions)) {
+		const upgraded = await checkSingleExtensionUpdate(ext, autoupgrade)
+		if (upgraded) {
+			upgradedCount++
+		}
+	}
+
+	if (upgradedCount > 0) {
+		toast.info(`${upgradedCount} extensions have been upgraded`)
+	}
+}
diff --git a/apps/desktop/src/routes/+error.svelte b/apps/desktop/src/routes/+error.svelte
index 91a5da3..a4ae1af 100644
--- a/apps/desktop/src/routes/+error.svelte
+++ b/apps/desktop/src/routes/+error.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goHome } from "@/utils/route"
 	import { Error, Layouts } from "@kksh/ui"
 	import { page } from "$app/stores"
 
@@ -11,12 +12,12 @@
 
 <svelte:window on:keydown={handleKeyDown} />
 
-<Layouts.Center class="h-screen">
+<Layouts.Center class="min-h-screen py-5">
 	<Error.RawErrorJSONPreset
-		title="Unknown Error"
-		class="w-fit max-w-screen-sm"
+		title="Error"
+		class="w-fit max-w-screen-sm border-2 border-red-500"
 		message={$page.error?.message ?? "Unknown Error"}
-		onnGoBack={() => window.history.back()}
+		onGoBack={goHome}
 		rawJsonError={JSON.stringify($page, null, 2)}
 	/>
 </Layouts.Center>
diff --git a/apps/desktop/src/routes/+layout.svelte b/apps/desktop/src/routes/+layout.svelte
index d590564..e0dfed2 100644
--- a/apps/desktop/src/routes/+layout.svelte
+++ b/apps/desktop/src/routes/+layout.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import AppContext from "@/components/context/AppContext.svelte"
 	import "../app.css"
-	import { appConfig, appState, extensions } from "@/stores"
+	import { appConfig, appState, extensions, quickLinks } from "@/stores"
+	import { initDeeplink } from "@/utils/deeplink"
 	import { isInMainWindow } from "@/utils/window"
 	import {
 		ModeWatcher,
@@ -16,11 +17,19 @@
 	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[] = []
 
 	onMount(async () => {
-		unlisteners.push(await attachConsole())
+		attachConsole().then((unlistener) => unlisteners.push(unlistener))
+		initDeeplink().then((unlistener) => unlisteners.push(unlistener))
+		quickLinks.init()
 		appConfig.init()
 		if (isInMainWindow()) {
 			extensions.init()
diff --git a/apps/desktop/src/routes/+layout.ts b/apps/desktop/src/routes/+layout.ts
index 8d7e6d2..028840b 100644
--- a/apps/desktop/src/routes/+layout.ts
+++ b/apps/desktop/src/routes/+layout.ts
@@ -1,5 +1,12 @@
+import { getExtensionsFolder } from "@/constants"
+import type { LayoutLoad } from "./$types"
+
 // Tauri doesn't have a Node.js server to do proper SSR
 // so we will use adapter-static to prerender the app (SSG)
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
 export const prerender = true
 export const ssr = false
+
+export const load: LayoutLoad = async () => {
+	return { extsInstallDir: await getExtensionsFolder() }
+}
diff --git a/apps/desktop/src/routes/+page.svelte b/apps/desktop/src/routes/+page.svelte
index 3f4ab05..be1be7f 100644
--- a/apps/desktop/src/routes/+page.svelte
+++ b/apps/desktop/src/routes/+page.svelte
@@ -1,18 +1,130 @@
+<!-- This file renders the main command palette, a list of commands -->
 <script lang="ts">
 	import { commandLaunchers } from "@/cmds"
 	import { builtinCmds } from "@/cmds/builtin"
-	import CommandPalette from "@/components/main/CommandPalette.svelte"
-	import { appState } from "@/stores"
-	import { appConfig } from "@/stores/appConfig"
-	import { extensions } from "@/stores/extensions"
-	import "@kksh/ui"
+	import { systemCommands } from "@/cmds/system"
+	import { appConfig, appState, devStoreExts, installedStoreExts, quickLinks } from "@/stores"
+	import { cmdQueries } from "@/stores/cmdQuery"
+	import { getActiveElementNodeName } from "@/utils/dom"
+	import { openDevTools } from "@kksh/api/commands"
+	import type { ExtPackageJsonExtra } from "@kksh/api/models"
+	import { isExtPathInDev } from "@kksh/extension/utils"
+	import { Button, Command, DropdownMenu } from "@kksh/svelte5"
+	import type { AppConfig, AppState } from "@kksh/types"
+	import {
+		BuiltinCmds,
+		CustomCommandInput,
+		ExtCmdsGroup,
+		GlobalCommandPaletteFooter,
+		QuickLinks,
+		SystemCmds
+	} from "@kksh/ui/main"
+	import type { BuiltinCmd, CmdValue, CommandLaunchers } from "@kksh/ui/types"
+	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"
+	import type { Writable } from "svelte/store"
+
+	function onKeyDown(event: KeyboardEvent) {
+		if (event.key === "Escape") {
+			if (getActiveElementNodeName() === "INPUT") {
+				;(event.target as HTMLInputElement).value = ""
+				if ((event.target as HTMLInputElement | undefined)?.id === "main-command-input") {
+					$appState.searchTerm = ""
+				}
+			}
+		}
+	}
 </script>
 
-<CommandPalette
-	class="h-screen"
-	extensions={$extensions}
-	{appState}
-	{appConfig}
-	{commandLaunchers}
-	{builtinCmds}
-/>
+<svelte:window on:keydown={onKeyDown} />
+<Command.Root
+	class={cn("h-screen rounded-lg border shadow-md")}
+	bind:value={$appState.highlightedCmd}
+	filter={(value, search, keywords) => {
+		return commandScore(
+			value.startsWith("{") ? (JSON.parse(value) as CmdValue).cmdName : value,
+			search,
+			keywords
+		)
+	}}
+	loop
+>
+	<CustomCommandInput
+		autofocus
+		id="main-command-input"
+		placeholder={$cmdQueries.length === 0 ? "Type a command or search..." : undefined}
+		bind:value={$appState.searchTerm}
+	>
+		{#snippet rightSlot()}
+			<span
+				class={cn("absolute flex space-x-2")}
+				style={`left: ${$appState.searchTerm.length + 3}ch`}
+			>
+				{#each $cmdQueries as cmdQuery}
+					{@const queryWidth = Math.max(cmdQuery.name.length, cmdQuery.value.length) + 2}
+					<input
+						class="bg-muted rounded-md border border-gray-300 pl-2 font-mono focus:outline-none dark:border-gray-600"
+						type="text"
+						placeholder={cmdQuery.name}
+						style={`width: ${queryWidth}ch`}
+						onkeydown={(evt) => {
+							if (evt.key === "Enter") {
+								evt.preventDefault()
+								evt.stopPropagation()
+								commandLaunchers.onQuickLinkSelect(
+									JSON.parse($appState.highlightedCmd),
+									$cmdQueries
+								)
+							}
+						}}
+						bind:value={cmdQuery.value}
+					/>
+				{/each}
+			</span>
+
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					<Button variant="outline" size="icon"><EllipsisVerticalIcon /></Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content>
+					<DropdownMenu.Group>
+						<DropdownMenu.GroupHeading>Settings</DropdownMenu.GroupHeading>
+						<DropdownMenu.Separator />
+						<DropdownMenu.Item onclick={() => exit()}>Quit</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={() => openDevTools()}>Open Dev Tools</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={() => getCurrentWebviewWindow().hide()}
+							>Close Window</DropdownMenu.Item
+						>
+					</DropdownMenu.Group>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		{/snippet}
+	</CustomCommandInput>
+	<Command.List class="max-h-screen grow">
+		<Command.Empty data-tauri-drag-region>No results found.</Command.Empty>
+		{#if $appConfig.extensionsInstallDir && $devStoreExts.length > 0}
+			<ExtCmdsGroup
+				extensions={$devStoreExts}
+				heading="Dev Extensions"
+				isDev={true}
+				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
+				hmr={$appConfig.hmr}
+			/>
+		{/if}
+		{#if $appConfig.extensionsInstallDir && $installedStoreExts.length > 0}
+			<ExtCmdsGroup
+				extensions={$installedStoreExts}
+				heading="Extensions"
+				isDev={false}
+				hmr={false}
+				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
+			/>
+		{/if}
+		<QuickLinks quickLinks={$quickLinks} />
+		<BuiltinCmds {builtinCmds} />
+		<SystemCmds {systemCommands} />
+	</Command.List>
+	<GlobalCommandPaletteFooter />
+</Command.Root>
diff --git a/apps/desktop/src/routes/auth/+page.svelte b/apps/desktop/src/routes/auth/+page.svelte
new file mode 100644
index 0000000..4a42802
--- /dev/null
+++ b/apps/desktop/src/routes/auth/+page.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { auth } from "@/stores"
+	import { supabase } from "@/supabase"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack, goHome } from "@/utils/route"
+	import Icon from "@iconify/svelte"
+	import { DEEP_LINK_PATH_AUTH_CONFIRM } from "@kksh/api"
+	import { Button, Card } from "@kksh/svelte5"
+	import { Layouts } from "@kksh/ui"
+	import { goto } from "$app/navigation"
+	import { ArrowLeft } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+	import { open } from "tauri-plugin-shellx-api"
+
+	const redirectTo = DEEP_LINK_PATH_AUTH_CONFIRM
+
+	const signInWithOAuth = async (provider: "github" | "google") => {
+		console.log(`Login with ${provider} redirecting to ${redirectTo}`)
+		const { error, data } = await supabase.auth.signInWithOAuth({
+			provider,
+			options: {
+				redirectTo,
+				skipBrowserRedirect: true
+			}
+		})
+		if (error) {
+			toast.error("Failed to sign in with OAuth", { description: error.message })
+		} else {
+			data.url && open(data.url)
+		}
+	}
+
+	onMount(() => {
+		if ($auth.session) {
+			toast.success("Already Signed In")
+			goHome()
+		}
+	})
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button variant="outline" size="icon" onclick={goBack} class="absolute left-2 top-2 z-50">
+	<ArrowLeft class="size-4" />
+</Button>
+<div class="absolute h-10 w-full" data-tauri-drag-region></div>
+<Layouts.Center class="h-screen w-screen" data-tauri-drag-region>
+	<Card.Root class="w-80">
+		<Card.Header class="flex flex-col items-center">
+			<img src="/favicon.png" alt="Kunkun" class="h-12 w-12 invert" />
+			<Card.Title class="text-xl">Sign In</Card.Title>
+		</Card.Header>
+		<Card.Content class="flex flex-col gap-2">
+			<Button variant="outline" size="lg" class="w-full" onclick={() => signInWithOAuth("github")}>
+				<Icon icon="fa6-brands:github" class="h-5 w-5" />
+			</Button>
+			<Button variant="outline" size="lg" class="w-full" onclick={() => signInWithOAuth("google")}>
+				<Icon icon="logos:google-icon" class="h-5 w-5" />
+			</Button>
+		</Card.Content>
+	</Card.Root>
+</Layouts.Center>
diff --git a/apps/desktop/src/routes/auth/confirm/+page.svelte b/apps/desktop/src/routes/auth/confirm/+page.svelte
new file mode 100644
index 0000000..78e2035
--- /dev/null
+++ b/apps/desktop/src/routes/auth/confirm/+page.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { auth } from "@/stores"
+	import { supabase } from "@/supabase"
+	import { goHomeOnEscape } from "@/utils/key"
+	import { goBack, goHome } from "@/utils/route"
+	import { Avatar, Button } from "@kksh/svelte5"
+	import { goto } from "$app/navigation"
+	import { ArrowLeft } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+
+	const { data } = $props()
+
+	async function authExchange() {
+		if (data.code) {
+			auth.signInExchange(data.code).then((res) => {
+				if (res.error) {
+					toast.error("Failed to sign in", { description: res.error.message })
+				} else {
+					toast.success("Signed In")
+				}
+			})
+		} else {
+			toast.error("No code found")
+		}
+	}
+
+	const avatarFallback = $derived.by(() => {
+		if (!$auth.session) return "?"
+		const nameSplit = $auth.session.user.user_metadata.name.split(" ").filter(Boolean)
+		if (nameSplit.length > 1) {
+			return nameSplit[0][0] + nameSplit.at(-1)[0]
+		} else if (nameSplit.length === 1) {
+			return nameSplit[0][0]
+		} else {
+			return "?"
+		}
+	})
+
+	onMount(() => {
+		authExchange()
+	})
+
+	function onSignOut() {
+		auth
+			.signOut()
+			.then(() => goto("/auth"))
+			.catch((err) => toast.error("Failed to sign out", { description: err.message }))
+	}
+</script>
+
+<svelte:window on:keydown={goHomeOnEscape} />
+<Button
+	class="absolute left-2 top-2 z-50"
+	variant="outline"
+	size="icon"
+	onclick={() => {
+		console.log("go Home")
+		goto("/")
+	}}
+>
+	<ArrowLeft class="size-4" />
+</Button>
+<div class="h-10 w-full" data-tauri-drag-region></div>
+<main class="container pt-10">
+	<div class="flex grow items-center justify-center pt-16">
+		<div class="flex flex-col items-center gap-4">
+			{#if $auth.session}
+				<span class="font-mono text-4xl font-bold">Welcome, You are Logged In</span>
+			{:else}
+				<span class="font-mono text-4xl font-bold">You Are Not Logged In</span>
+			{/if}
+			<span class="flex flex-col items-center gap-5 text-xl">
+				{#if $auth.session}
+					<Avatar.Root class="h-32 w-32 border">
+						<Avatar.Image src={$auth.session?.user.user_metadata.avatar_url} alt="avatar" />
+						<Avatar.Fallback>{avatarFallback}</Avatar.Fallback>
+					</Avatar.Root>
+				{/if}
+				<Button variant="outline" onclick={onSignOut}>Sign Out</Button>
+			</span>
+		</div>
+	</div>
+</main>
diff --git a/apps/desktop/src/routes/auth/confirm/+page.ts b/apps/desktop/src/routes/auth/confirm/+page.ts
new file mode 100644
index 0000000..3418ef7
--- /dev/null
+++ b/apps/desktop/src/routes/auth/confirm/+page.ts
@@ -0,0 +1,10 @@
+import { error } from "@sveltejs/kit"
+import type { PageLoad } from "./$types"
+
+export const load: PageLoad = async ({ params, url }) => {
+	const code = url.searchParams.get("code")
+	if (!code) {
+		throw error(400, "Auth Exchange Code is Required")
+	}
+	return { params, code }
+}
diff --git a/apps/desktop/src/routes/extension/create-quick-link/+page.svelte b/apps/desktop/src/routes/extension/create-quick-link/+page.svelte
new file mode 100644
index 0000000..4e782f4
--- /dev/null
+++ b/apps/desktop/src/routes/extension/create-quick-link/+page.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { quickLinks } from "@/stores/quick-links"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { Icon, IconEnum, IconType } from "@kksh/api/models"
+	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 } 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.url(), v.minLength(5), v.maxLength(1000)),
+		iconType: IconType,
+		iconValue: v.string(),
+		invertIcon: v.boolean()
+	})
+	let icon = $state<Icon>({
+		type: IconEnum.Iconify,
+		value: "material-symbols:link",
+		invert: false
+	})
+	const form = superForm(defaults(valibot(formSchema)), {
+		validators: valibotClient(formSchema),
+		SPA: true,
+		onUpdate({ form, cancel }) {
+			cancel()
+			if (!form.valid) return
+			const { name, link, iconType, iconValue } = form.data
+			quickLinks
+				.createQuickLink(name, link, icon)
+				.then(() => {
+					toast.success("Quicklink created successfully")
+					goBack()
+				})
+				.catch((err) => {
+					toast.error("Failed to create quicklink", { description: err })
+				})
+		}
+	})
+
+	const { form: formData, enhance, errors } = form
+	const placeholders = {
+		name: "Quick Link Name",
+		link: "https://google.com/search?q={argument}"
+	}
+
+	const defaultFaviconUrl = $derived(
+		$formData.link ? new URL($formData.link).origin + "/favicon.ico" : undefined
+	)
+	$effect(() => {
+		if (defaultFaviconUrl && defaultFaviconUrl.length > 0) {
+			icon.type = IconEnum.RemoteUrl
+			icon.value = defaultFaviconUrl
+		}
+	})
+
+	$effect(() => {
+		$formData.iconType = icon.type
+		$formData.iconValue = icon.value
+		$formData.invertIcon = icon.invert ?? false
+	})
+</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="h-12" data-tauri-drag-region></div>
+<div class="container">
+	<h1 class="text-2xl font-bold">Create Quick Link</h1>
+	<form method="POST" use:enhance>
+		<Form.Field {form} name="name">
+			<Form.Control>
+				{#snippet children({ props })}
+					<Form.Label>Name</Form.Label>
+					<Input {...props} bind:value={$formData.name} placeholder={placeholders.name} />
+				{/snippet}
+			</Form.Control>
+			<Form.Description>Quick Link Display Name</Form.Description>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="link">
+			<Form.Control>
+				{#snippet children({ props })}
+					<Form.Label>Link</Form.Label>
+					<Input {...props} bind:value={$formData.link} placeholder={placeholders.link} />
+				{/snippet}
+			</Form.Control>
+			<Form.Description>Quick Link URL</Form.Description>
+			<Form.FieldErrors />
+		</Form.Field>
+		<IconSelector class="border" bind:icon />
+		<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} />
+		<Form.Button class="my-1">Submit</Form.Button>
+	</form>
+</div>
+{#if dev}
+	<div class="p-5">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}
diff --git a/apps/desktop/src/routes/extension/create-quick-link/schema.ts b/apps/desktop/src/routes/extension/create-quick-link/schema.ts
new file mode 100644
index 0000000..c4de730
--- /dev/null
+++ b/apps/desktop/src/routes/extension/create-quick-link/schema.ts
@@ -0,0 +1,7 @@
+import { z } from "zod"
+
+export const formSchema = z.object({
+	username: z.string().min(2).max(50)
+})
+
+export type FormSchema = typeof formSchema
diff --git a/apps/desktop/src/routes/extension/permission-inspector/+page.svelte b/apps/desktop/src/routes/extension/permission-inspector/+page.svelte
new file mode 100644
index 0000000..2294407
--- /dev/null
+++ b/apps/desktop/src/routes/extension/permission-inspector/+page.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { listenToFileDrop } from "@/utils/tauri-events"
+	import type { ExtPackageJsonExtra } from "@kksh/api/models"
+	import { loadExtensionManifestFromDisk } from "@kksh/extension"
+	import { Button, Card } from "@kksh/svelte5"
+	import { PermissionInspector } from "@kksh/ui/extension"
+	import type { UnlistenFn } from "@tauri-apps/api/event"
+	import { join } from "@tauri-apps/api/path"
+	import { getCurrentWebview } from "@tauri-apps/api/webview"
+	import { open as openDialog } from "@tauri-apps/plugin-dialog"
+	import { exists } from "@tauri-apps/plugin-fs"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { onDestroy, onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+
+	let pkgJsons = $state<ExtPackageJsonExtra[]>([])
+	let unlistenDropEvt: UnlistenFn
+
+	onMount(async () => {
+		unlistenDropEvt = await getCurrentWebview().onDragDropEvent((event) => {
+			if (event.payload.type === "drop") {
+				inspectPaths(event.payload.paths)
+			}
+		})
+	})
+
+	onDestroy(() => {
+		unlistenDropEvt?.()
+	})
+
+	async function inspectPaths(paths: string[]) {
+		for (const path of paths) {
+			if (!(await exists(path))) {
+				toast.error("Selected path does not exist", { description: path })
+				continue
+			}
+			const manifestPath = await join(path, "package.json")
+			if (!(await exists(manifestPath))) {
+				toast.error("Selected path is not an extension", { description: path })
+				continue
+			}
+			try {
+				pkgJsons.push(await loadExtensionManifestFromDisk(manifestPath))
+				toast.success("Extension manifest loaded", { description: path })
+			} catch (err) {
+				toast.error(`Failed to load extension manifest: ${err}`, { description: path })
+			}
+		}
+	}
+
+	async function onPick() {
+		const paths = await openDialog({
+			directory: true,
+			multiple: true
+		})
+		if (!paths) {
+			return toast.error("No folder selected")
+		}
+		inspectPaths(paths)
+	}
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+
+<main class="container w-screen pt-10">
+	<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
+		<ArrowLeftIcon class="h-4 w-4" />
+	</Button>
+	<h1 class="text-2xl font-bold">Extension Permission Inspector</h1>
+	<Button class="my-5" onclick={onPick}>Pick Extension Folder to Inspect</Button>
+	<div class="mb-5 flex flex-col gap-4">
+		{#each pkgJsons as pkgJson}
+			<Card.Root>
+				<Card.Header>
+					<Card.Title>{pkgJson.kunkun.name}</Card.Title>
+					<Card.Description>{pkgJson.kunkun.shortDescription}</Card.Description>
+				</Card.Header>
+				<Card.Content>
+					<PermissionInspector manifest={pkgJson.kunkun} />
+				</Card.Content>
+				<Card.Footer class="block">
+					<p class="text-sm">
+						<strong>Identifier:</strong> <code>{pkgJson.kunkun.identifier}</code>
+					</p>
+					<p class="text-sm">
+						<strong>Extension Path:</strong> <code>{pkgJson.extPath}</code>
+					</p>
+				</Card.Footer>
+			</Card.Root>
+		{/each}
+	</div>
+</main>
+
+<style>
+	:global(body) {
+		overflow-x: hidden;
+	}
+</style>
diff --git a/apps/desktop/src/routes/extension/store/+page.svelte b/apps/desktop/src/routes/extension/store/+page.svelte
index 7f53ef9..d8d7a1f 100644
--- a/apps/desktop/src/routes/extension/store/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/+page.svelte
@@ -2,8 +2,8 @@
 	import { getExtensionsFolder } from "@/constants"
 	import { appState, extensions } from "@/stores"
 	import { supabaseAPI } from "@/supabase"
-	import { goBackOnEscapeClearSearchTerm } from "@/utils/key"
-	import { goBack } from "@/utils/route"
+	import { goBackOnEscapeClearSearchTerm, goHomeOnEscapeClearSearchTerm } from "@/utils/key"
+	import { goBack, goHome } from "@/utils/route"
 	import { SBExt } from "@kksh/api/supabase"
 	import { isUpgradable } from "@kksh/extension"
 	import { Button, Command } from "@kksh/svelte5"
@@ -64,20 +64,19 @@
 	}
 </script>
 
-<svelte:window on:keydown={goBackOnEscapeClearSearchTerm} />
-
+<svelte:window on:keydown={goHomeOnEscapeClearSearchTerm} />
 {#snippet leftSlot()}
 	<Button
 		variant="outline"
 		size="icon"
-		onclick={goBack}
+		onclick={goHome}
 		class={Constants.CLASSNAMES.BACK_BUTTON}
 		data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
 	>
 		<ArrowLeft class="size-4" />
 	</Button>
 {/snippet}
-<Command.Root class="h-screen rounded-lg border shadow-md">
+<Command.Root class="h-screen rounded-lg border shadow-md" loop>
 	<CustomCommandInput
 		autofocus
 		placeholder="Type a command or search..."
diff --git a/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte b/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte
index 4768785..19b2b50 100644
--- a/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte
@@ -12,12 +12,12 @@
 
 <svelte:window on:keydown={handleKeyDown} />
 
-<Layouts.Center class="h-screen">
+<Layouts.Center class="min-h-screen py-5">
 	<Error.RawErrorJSONPreset
 		title="Fail to Load Extension"
-		class="w-fit max-w-screen-sm"
+		class="w-fit max-w-screen-sm border-2 border-red-500"
 		message={$page.error?.message ?? "Unknown Error"}
-		onnGoBack={() => goto("/")}
+		onGoBack={() => goto("/")}
 		rawJsonError={JSON.stringify($page, null, 2)}
 	/>
 </Layouts.Center>
diff --git a/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte b/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
index 67ce854..55a7f97 100644
--- a/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
@@ -9,13 +9,15 @@
 	import { StoreExtDetail } from "@kksh/ui/extension"
 	import { greaterThan, parse as parseSemver } from "@std/semver"
 	import { error } from "@tauri-apps/plugin-log"
+	import { goto } from "$app/navigation"
 	import { ArrowLeftIcon } from "lucide-svelte"
 	import { onMount } from "svelte"
 	import { toast } from "svelte-sonner"
 	import { get, derived as storeDerived } from "svelte/store"
 
 	const { data } = $props()
-	let { ext, manifest } = data
+	const ext = $derived(data.ext)
+	const manifest = $derived(data.manifest)
 	const installedExt = storeDerived(installedStoreExts, ($e) => {
 		return $e.find((e) => e.kunkun.identifier === ext.identifier)
 	})
@@ -36,9 +38,9 @@
 
 	onMount(() => {
 		showBtn = {
-			install: !installedExt,
+			install: !$installedExt,
 			upgrade: isUpgradable,
-			uninstall: !!installedExt
+			uninstall: !!$installedExt
 		}
 	})
 
@@ -114,43 +116,44 @@
 			.uninstallStoreExtensionByIdentifier(ext.identifier)
 			.then((uninstalledExt) => {
 				toast.success(`${uninstalledExt.name} Uninstalled`)
+				loading.uninstall = false
+				showBtn.uninstall = false
+				showBtn.install = true
 			})
 			.catch((err) => {
 				toast.error("Fail to uninstall extension", { description: err })
 				error(`Fail to uninstall store extension (${ext.identifier}): ${err}`)
 			})
-			.finally(() => {
-				loading.uninstall = false
-				showBtn.uninstall = false
-				showBtn.install = true
-			})
+			.finally(() => {})
 	}
 
 	function onEnterPressed() {
-		return onInstallSelected()
+		if (showBtn.install) {
+			return onInstallSelected()
+		}
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === "Escape") {
 			if (!delayedImageDialogOpen) {
-				goBack()
+				goto("/extension/store")
 			}
 		}
 	}
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
-
 <Button
 	variant="outline"
 	size="icon"
 	class={cn("fixed left-3 top-3", Constants.CLASSNAMES.BACK_BUTTON)}
 	data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
-	onclick={goBack}
+	onclick={() => goto("/extension/store")}
 >
 	<ArrowLeftIcon />
 </Button>
 <StoreExtDetail
+	class="px-5"
 	{ext}
 	{manifest}
 	installedExt={$installedExt}
diff --git a/apps/desktop/src/routes/extension/store/[identifier]/+page.ts b/apps/desktop/src/routes/extension/store/[identifier]/+page.ts
index c79c946..db46357 100644
--- a/apps/desktop/src/routes/extension/store/[identifier]/+page.ts
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+page.ts
@@ -13,7 +13,12 @@ export const load: PageLoad = async ({
 }): Promise<{
 	ext: Tables<"ext_publish">
 	manifest: KunkunExtManifest
+	params: {
+		identifier: string
+	}
 }> => {
+	console.log("store[identifier] params", params)
+
 	const { error: dbError, data: ext } = await supabaseAPI.getLatestExtPublish(params.identifier)
 	if (dbError) {
 		return error(400, {
@@ -30,6 +35,7 @@ export const load: PageLoad = async ({
 
 	return {
 		ext,
+		params,
 		manifest: parseManifest.output
 	}
 }
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 867100e..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
@@ -6,8 +6,8 @@
 	import { ArrowLeftIcon } from "lucide-svelte"
 </script>
 
-<svelte:window on:keydown|preventDefault={goBackOnEscape} />
-<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
+<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>
diff --git a/apps/desktop/src/routes/troubleshooters/extension-loading/+page.svelte b/apps/desktop/src/routes/troubleshooters/extension-loading/+page.svelte
new file mode 100644
index 0000000..df4901d
--- /dev/null
+++ b/apps/desktop/src/routes/troubleshooters/extension-loading/+page.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { db } from "@kksh/api/commands"
+	import { loadExtensionManifestFromDisk } from "@kksh/extension"
+	import { Button, Dialog, ScrollArea, Table } from "@kksh/svelte5"
+	import { join } from "@tauri-apps/api/path"
+	import { exists } from "@tauri-apps/plugin-fs"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+	import { open } from "tauri-plugin-shellx-api"
+
+	type Result = {
+		identifier: string
+		path: string
+		error?: string
+	}
+
+	let results = $state<Result[]>([])
+	let isDialogOpen = $state(false)
+	let errorMsg = $state<string | undefined>()
+
+	const sortedResults = $derived.by(() =>
+		results.slice().sort((a, b) => {
+			return a.error ? -1 : 1
+		})
+	)
+
+	async function check() {
+		results = []
+		const tmpResults = []
+		const extensions = await db.getAllExtensions()
+		for (const ext of extensions) {
+			if (!ext.path) continue
+			const _exists = await exists(ext.path)
+			let error: string | undefined = undefined
+			if (!_exists) {
+				error = `Extension path (${ext.path}) does not exist`
+			}
+			const pkgJsonPath = await join(ext.path, "package.json")
+			const _pkgJsonExists = await exists(pkgJsonPath)
+			if (!_pkgJsonExists) {
+				error = `Extension package.json (${pkgJsonPath}) does not exist`
+			}
+			try {
+				const manifest = await loadExtensionManifestFromDisk(pkgJsonPath)
+			} catch (err: any) {
+				error = `Failed to load manifest from ${pkgJsonPath}: ${err.message}`
+			}
+
+			tmpResults.push({
+				identifier: ext.identifier,
+				path: ext.path,
+				error
+			})
+		}
+		results = tmpResults
+		const numErrors = results.filter((r) => r.error).length
+		const toastFn = numErrors > 0 ? toast.error : toast.info
+		toastFn(`${numErrors} errors found`, {
+			description: numErrors > 0 ? "Click on an error to see more details" : undefined
+		})
+	}
+
+	function onErrorClick(errMsg?: string) {
+		if (errMsg) {
+			isDialogOpen = true
+			errorMsg = errMsg
+		} else {
+			toast.info("No error message")
+		}
+	}
+
+	onMount(() => {
+		check()
+	})
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button variant="outline" size="icon" class="absolute 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>
+<div class="container pt-10">
+	<h1 class="text-2xl font-bold">Extension Loading Troubleshooter</h1>
+	<Button class="my-2" onclick={check}>Check</Button>
+	<Dialog.Root bind:open={isDialogOpen}>
+		<Dialog.Content class="sm:max-w-[425px]">
+			<Dialog.Header>
+				<Dialog.Title>Error Details</Dialog.Title>
+			</Dialog.Header>
+			{errorMsg}
+		</Dialog.Content>
+	</Dialog.Root>
+	<Table.Root>
+		<Table.Caption>A list of your extensions.</Table.Caption>
+		<Table.Header>
+			<Table.Row>
+				<Table.Head class="">Identifier</Table.Head>
+				<Table.Head>Path</Table.Head>
+				<Table.Head>Error</Table.Head>
+			</Table.Row>
+		</Table.Header>
+		<Table.Body>
+			{#each sortedResults as row}
+				<Table.Row>
+					<Table.Cell class="font-medium"><pre>{row.identifier}</pre></Table.Cell>
+					<Table.Cell class="">
+						<button onclick={() => open(row.path)} class="text-left">
+							<pre class="cursor-pointer text-wrap">{row.path}</pre>
+						</button>
+					</Table.Cell>
+					<Table.Cell class="text-right">
+						<button onclick={() => onErrorClick(row.error)}>
+							{row.error ? "⚠️" : "✅"}
+						</button>
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<style>
+	:global(body) {
+		overflow-x: hidden;
+	}
+</style>
diff --git a/apps/desktop/src/routes/troubleshooters/extension-window/+page.svelte b/apps/desktop/src/routes/troubleshooters/extension-window/+page.svelte
new file mode 100644
index 0000000..08c0044
--- /dev/null
+++ b/apps/desktop/src/routes/troubleshooters/extension-window/+page.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { winExtMap } from "@/stores"
+	import { goBackOnEscape, goBackOnEscapeClearSearchTerm } from "@/utils/key"
+	import { goBack, goHome } from "@/utils/route"
+	import { getExtLabelMap, unregisterExtensionWindow } from "@kksh/api/commands"
+	import type { ExtensionLabelMap } from "@kksh/api/models"
+	import { Button, Checkbox, ScrollArea } from "@kksh/svelte5"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { ArrowLeftIcon, TrashIcon } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+
+	const appWin = getCurrentWebviewWindow()
+	let winLabelMap = $state<ExtensionLabelMap>({})
+	let refreshEverySecond = $state(true)
+	let refreshCount = $state(0)
+
+	async function refresh() {
+		const extLabelMap = await getExtLabelMap()
+		winLabelMap = extLabelMap
+		refreshCount++
+	}
+
+	function refreshWinLabelMapRecursively() {
+		setTimeout(async () => {
+			await refresh()
+			if (refreshEverySecond) {
+				refreshWinLabelMapRecursively()
+			}
+		}, 1000)
+	}
+
+	onMount(async () => {
+		const extLabelMap = await getExtLabelMap()
+		winLabelMap = extLabelMap
+		refreshCount = 1
+	})
+
+	$effect(() => {
+		if (refreshEverySecond) {
+			refreshWinLabelMapRecursively()
+		}
+	})
+
+	function unregisterWindow(label: string) {
+		// winExtMap
+		// 	.unregisterExtensionFromWindow(label)
+		unregisterExtensionWindow(label)
+			.then(() => {
+				toast.success("Unregistered window")
+			})
+			.catch((err) => {
+				toast.error("Failed to unregister window", { description: err.message })
+			})
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			if (appWin.label === "main") {
+				goHome()
+			} else {
+				appWin.close()
+			}
+		}
+	}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
+	<ArrowLeftIcon class="h-4 w-4" />
+</Button>
+<main class="container h-screen w-screen pt-10">
+	<div class="flex items-center justify-between space-x-2">
+		<div class="flex items-center space-x-2">
+			<Checkbox id="refreshEverySecond" bind:checked={refreshEverySecond} />
+			<label
+				for="refreshEverySecond"
+				class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+			>
+				Refresh Every Second
+			</label>
+		</div>
+		<span class="flex items-center space-x-2">
+			<Button size="sm" onclick={refresh}>Refresh</Button>
+			<span>Refreshed {refreshCount} times</span>
+		</span>
+	</div>
+	<ScrollArea class="py-5" orientation="both">
+		{#each Object.entries(winLabelMap) as [label, content]}
+			<li>
+				<span class="flex gap-2">
+					<strong>Label:</strong>
+					<pre class="text-lime">{label}</pre>
+				</span>
+				<ul class="pl-5">
+					{#each Object.entries(content) as [key, value]}
+						<li>
+							<span class="flex gap-2">
+								<strong>{key}:</strong>
+								<pre class="text-lime">{value}</pre>
+							</span>
+						</li>
+					{/each}
+				</ul>
+				<Button variant="destructive" size="icon" onclick={() => unregisterWindow(label)}>
+					<TrashIcon />
+				</Button>
+			</li>
+		{/each}
+	</ScrollArea>
+</main>
diff --git a/apps/desktop/tailwind.config.ts b/apps/desktop/tailwind.config.ts
index fbc57f7..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"
@@ -9,7 +10,7 @@ const config: Config = {
 		"./node_modules/@kksh/ui/src/**/*.{html,js,svelte,ts}",
 		"../../node_modules/@kksh/svelte5/src/**/*.{html,js,svelte,ts}"
 	],
-	safelist: ["dark"],
+	safelist: ["dark", "bg-red-500/30"],
 	theme: {
 		container: {
 			center: true,
@@ -94,7 +95,7 @@ const config: Config = {
 			}
 		}
 	},
-	plugins: [tailwindcssAnimate]
+	plugins: [tailwindcssAnimate, typography]
 }
 
 export default config
diff --git a/apps/desktop/tsconfig.json b/apps/desktop/tsconfig.json
index 593dc19..a2288c7 100644
--- a/apps/desktop/tsconfig.json
+++ b/apps/desktop/tsconfig.json
@@ -1,19 +1,20 @@
 {
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "moduleResolution": "bundler"
-  }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
-  //
-  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-  // from the referenced tsconfig.json - TypeScript does not merge them in
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	},
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+	"include": ["src/**/*"]
 }
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..09ea201 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,8 +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`
 	//
 	// 1. prevent vite from obscuring rust errors
diff --git a/package.json b/package.json
index c980dcc..382d7fb 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
 		"@kksh/api": "workspace:*",
-		"@kksh/svelte5": "0.1.2-beta.4",
+		"@kksh/svelte5": "0.1.2-beta.8",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.7",
 		"prettier-plugin-tailwindcss": "^0.6.8",
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/commands/extension.ts b/packages/api/src/commands/extension.ts
index d7b02d0..66481bb 100644
--- a/packages/api/src/commands/extension.ts
+++ b/packages/api/src/commands/extension.ts
@@ -26,7 +26,6 @@ export function registerExtensionWindow(options: {
 }
 
 export function unregisterExtensionWindow(label: string): Promise<void> {
-	console.log("unregisterExtensionWindow", label)
 	return invoke(generateJarvisPluginCommand("unregister_extension_window"), {
 		label
 	})
diff --git a/packages/api/src/commands/system.ts b/packages/api/src/commands/system.ts
index 953f7fb..40746be 100644
--- a/packages/api/src/commands/system.ts
+++ b/packages/api/src/commands/system.ts
@@ -295,7 +295,7 @@ export const rawSystemCommands = [
 	}
 ]
 
-export async function getSystemCommands(): Promise<SysCommand[]> {
+export function getSystemCommands(): SysCommand[] {
 	return rawSystemCommands
 		.filter(async (cmd) => cmd.platforms.includes(platform())) // Filter out system commands that are not supported on the current platform
 		.map((cmd) => ({
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/models/extension.ts b/packages/api/src/models/extension.ts
index 0b1a150..4c7f2e6 100644
--- a/packages/api/src/models/extension.ts
+++ b/packages/api/src/models/extension.ts
@@ -41,6 +41,8 @@ export type Ext = InferOutput<typeof Ext>
 
 export enum CmdTypeEnum {
 	HeadlessWorker = "headless_worker",
+	Builtin = "builtin",
+	System = "system",
 	UiWorker = "ui_worker",
 	UiIframe = "ui_iframe",
 	QuickLink = "quick_link",
@@ -55,12 +57,18 @@ export const ExtCmd = object({
 	name: string(),
 	type: CmdType,
 	data: string(),
-	alias: optional(string()),
-	hotkey: optional(string()),
+	alias: nullable(optional(string())),
+	hotkey: nullable(optional(string())),
 	enabled: boolean()
 })
 export type ExtCmd = InferOutput<typeof ExtCmd>
 
+export const QuickLinkCmd = object({
+	...ExtCmd.entries,
+	data: object({ link: string(), icon: Icon })
+})
+export type QuickLinkCmd = InferOutput<typeof QuickLinkCmd>
+
 export const ExtData = object({
 	dataId: number(),
 	extId: number(),
diff --git a/packages/api/src/models/icon.ts b/packages/api/src/models/icon.ts
index 6639ba5..26872e9 100644
--- a/packages/api/src/models/icon.ts
+++ b/packages/api/src/models/icon.ts
@@ -1,4 +1,13 @@
-import { enum_, literal, object, string, type InferOutput } from "valibot"
+import {
+	boolean,
+	enum_,
+	literal,
+	nullable,
+	object,
+	optional,
+	string,
+	type InferOutput
+} from "valibot"
 import { NodeName, NodeNameEnum } from "./constants"
 
 /* -------------------------------------------------------------------------- */
@@ -16,7 +25,8 @@ export type IconType = InferOutput<typeof IconType>
 
 export const Icon = object({
 	type: IconType,
-	value: string()
+	value: string(),
+	invert: optional(boolean())
 })
 export type Icon = InferOutput<typeof Icon>
 export const IconNode = object({
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/db.ts b/packages/extension/src/db.ts
index a6246ba..b76d7e4 100644
--- a/packages/extension/src/db.ts
+++ b/packages/extension/src/db.ts
@@ -1,5 +1,13 @@
 import { db } from "@kksh/api/commands"
-import { ExtPackageJson, ExtPackageJsonExtra } from "@kksh/api/models"
+import {
+	CmdTypeEnum,
+	ExtCmd,
+	ExtPackageJson,
+	ExtPackageJsonExtra,
+	Icon,
+	QuickLinkCmd
+} from "@kksh/api/models"
+import * as v from "valibot"
 
 export async function upsertExtension(extPkgJson: ExtPackageJson, extFullPath: string) {
 	const extInDb = await db.getUniqueExtensionByIdentifier(extPkgJson.kunkun.identifier)
@@ -12,3 +20,38 @@ export async function upsertExtension(extPkgJson: ExtPackageJson, extFullPath: s
 		})
 	}
 }
+
+export async function createQuickLinkCommand(name: string, link: string, icon: Icon) {
+	const extension = await db.getExtQuickLinks()
+	return db.createCommand({
+		extId: extension.extId,
+		name,
+		cmdType: CmdTypeEnum.QuickLink,
+		data: JSON.stringify({
+			link,
+			icon
+		}),
+		enabled: true
+	})
+}
+
+export async function getAllQuickLinkCommands(): Promise<QuickLinkCmd[]> {
+	const extension = await db.getExtQuickLinks()
+	const cmds = await db.getCommandsByExtId(extension.extId)
+	return cmds
+		.map((cmd) => {
+			try {
+				cmd.data = JSON.parse(cmd.data)
+				const parsedData = v.safeParse(QuickLinkCmd, cmd)
+				if (!parsedData.success) {
+					console.warn("Fail to parse quick link command", cmd)
+					console.error(v.flatten(parsedData.issues))
+					return null
+				}
+				return parsedData.output
+			} catch (error) {
+				return null
+			}
+		})
+		.filter((cmd) => cmd !== null)
+}
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/schema/package.json b/packages/schema/package.json
index e3070c8..0b33136 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -15,8 +15,7 @@
 	},
 	"devDependencies": {
 		"@gcornut/valibot-json-schema": "^0.42.0",
-		"@types/bun": "latest",
-		"supabase": ">=1.8.1"
+		"@types/bun": "latest"
 	},
 	"peerDependencies": {
 		"@kksh/supabase": "workspace:*",
@@ -25,7 +24,6 @@
 	"dependencies": {
 		"@aws-sdk/client-s3": "^3.583.0",
 		"@kksh/api": "workspace:*",
-		"@supabase/supabase-js": "^2.43.4",
 		"valibot": "^0.40.0"
 	}
 }
diff --git a/packages/schema/scripts/upload-schema-to-supabase.ts b/packages/schema/scripts/upload-schema-to-supabase.ts
index f4bf48a..eddd837 100644
--- a/packages/schema/scripts/upload-schema-to-supabase.ts
+++ b/packages/schema/scripts/upload-schema-to-supabase.ts
@@ -1,10 +1,9 @@
 import { ExtPackageJson } from "@kksh/api/models"
-import { type Database } from "@kksh/supabase"
-import { createClient } from "@supabase/supabase-js"
+import { createSB } from "@kksh/supabase"
 import { parse, string } from "valibot"
 import { getJsonSchema } from "../src"
 
-const supabase = createClient<Database>(
+const supabase = createSB(
 	parse(string(), process.env.SUPABASE_URL),
 	parse(string(), process.env.SUPABASE_SERVICE_ROLE_KEY)
 )
diff --git a/packages/supabase/package.json b/packages/supabase/package.json
index 4248fdd..d4cf8bf 100644
--- a/packages/supabase/package.json
+++ b/packages/supabase/package.json
@@ -8,7 +8,8 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@kksh/api": "workspace:*"
+		"@kksh/api": "workspace:*",
+		"@supabase/supabase-js": "^2.46.1"
 	},
 	"devDependencies": {
 		"@types/bun": "latest"
diff --git a/packages/supabase/src/index.ts b/packages/supabase/src/index.ts
index 9285d65..09aae5e 100644
--- a/packages/supabase/src/index.ts
+++ b/packages/supabase/src/index.ts
@@ -2,7 +2,11 @@ import type { Database } from "@kksh/api/supabase/types"
 import { createClient } from "@supabase/supabase-js"
 
 export function createSB(supabaseUrl: string, supabaseAnonKey: string) {
-	return createClient<Database>(supabaseUrl, supabaseAnonKey)
+	return createClient<Database>(supabaseUrl, supabaseAnonKey, {
+		auth: {
+			flowType: "pkce"
+		}
+	})
 }
 export { SupabaseAPI } from "./api"
 
diff --git a/packages/types/src/appConfig.ts b/packages/types/src/appConfig.ts
index 31a2dec..289adc0 100644
--- a/packages/types/src/appConfig.ts
+++ b/packages/types/src/appConfig.ts
@@ -23,6 +23,6 @@ export type PersistedAppConfig = v.InferOutput<typeof PersistedAppConfig>
 
 export type AppConfig = PersistedAppConfig & {
 	isInitialized: boolean
-	extensionPath?: string
+	extensionsInstallDir?: string
 	platform: Platform
 }
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/components.json b/packages/ui/components.json
index f10b563..33c48e0 100644
--- a/packages/ui/components.json
+++ b/packages/ui/components.json
@@ -8,10 +8,10 @@
 	},
 	"aliases": {
 		"components": "@kksh/ui/src/components",
-		"utils": "@kksh/ui/src/utils",
+		"utils": "@kksh/ui/utils",
 		"ui": "@kksh/ui/src/components/ui",
 		"hooks": "@kksh/ui/src/hooks"
 	},
 	"typescript": true,
 	"registry": "https://next.shadcn-svelte.com/registry"
-}
+}
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 55cca6d..2a6149b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -34,24 +34,31 @@
 		"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.36",
+		"bits-ui": "1.0.0-next.45",
 		"clsx": "^2.1.1",
+		"formsnap": "2.0.0-next.1",
 		"lucide-svelte": "^0.454.0",
 		"mode-watcher": "^0.4.1",
 		"paneforge": "1.0.0-next.1",
 		"shiki": "^1.22.2",
 		"svelte-radix": "^2.0.1",
 		"svelte-sonner": "^0.3.28",
+		"sveltekit-superforms": "^2.20.0",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
 		"tailwindcss": "^3.4.14",
-		"tailwindcss-animate": "^1.0.7"
+		"tailwindcss-animate": "^1.0.7",
+		"zod": "^3.23.8"
 	},
 	"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/IconMultiplexer.svelte b/packages/ui/src/components/common/IconMultiplexer.svelte
index e76760e..74996ee 100644
--- a/packages/ui/src/components/common/IconMultiplexer.svelte
+++ b/packages/ui/src/components/common/IconMultiplexer.svelte
@@ -12,17 +12,37 @@
 </script>
 
 {#if icon.type === IconEnum.RemoteUrl}
-	<img loading="lazy" class={cn("", className)} src={icon.value} alt="" {...restProps} />
+	<img
+		loading="lazy"
+		class={cn("", className, { invert: icon.invert })}
+		src={icon.value}
+		alt=""
+		{...restProps}
+	/>
 {:else if icon.type === IconEnum.Iconify}
-	<Icon icon={icon.value} class={cn("", className)} {...restProps} />
+	<Icon icon={icon.value} class={cn("", className, { invert: icon.invert })} {...restProps} />
 {:else if icon.type === IconEnum.Base64PNG}
-	<img loading="lazy" src="data:image/png;base64, {icon.value}" alt="" {...restProps} />
+	<img
+		class={cn(className, { invert: icon.invert })}
+		loading="lazy"
+		src="data:image/png;base64, {icon.value}"
+		alt=""
+		{...restProps}
+	/>
 {:else if icon.type === IconEnum.Text}
-	<Button class={cn("shrink-0 text-center", className)} size="icon" {...restProps}>
+	<Button
+		class={cn("shrink-0 text-center", className, { invert: icon.invert })}
+		size="icon"
+		{...restProps}
+	>
 		{icon.value}
 	</Button>
 {:else if icon.type === IconEnum.Svg}
-	<span {...restProps}>{@html icon.value}</span>
+	<span {...restProps} class={cn(className, { invert: icon.invert })}>{@html icon.value}</span>
 {:else}
-	<Icon icon="mingcute:appstore-fill" class={cn("", className)} {...restProps} />
+	<Icon
+		icon="mingcute:appstore-fill"
+		class={cn("", className, { invert: icon.invert })}
+		{...restProps}
+	/>
 {/if}
diff --git a/packages/ui/src/components/common/IconSelector.svelte b/packages/ui/src/components/common/IconSelector.svelte
new file mode 100644
index 0000000..70576ab
--- /dev/null
+++ b/packages/ui/src/components/common/IconSelector.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { Icon, IconEnum, IconType } from "@kksh/api/models"
+	import { Button, Checkbox, Label, Select, Textarea } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { open } from "tauri-plugin-shellx-api"
+	import IconMultiplexer from "./IconMultiplexer.svelte"
+
+	let { icon = $bindable<Icon>(), class: className }: { icon?: Icon; class?: string } = $props()
+	const iconOptions: Record<string, IconType> = {
+		"Remote Url": IconEnum.RemoteUrl,
+		Iconify: IconEnum.Iconify,
+		Svg: IconEnum.Svg,
+		"Base64 PNG": IconEnum.Base64PNG
+	}
+	const iconOptionsArray = $derived(Object.entries(iconOptions))
+	const triggerContent = $derived(
+		iconOptionsArray.find(([_, value]) => value === icon.type)?.[0] ?? "Select a fruit"
+	)
+</script>
+
+<div class="flex flex-col gap-2">
+	<Select.Root type="single" name="icontype" bind:value={icon.type}>
+		<Select.Trigger class="w-[180px]">
+			{triggerContent}
+		</Select.Trigger>
+		<Select.Content>
+			<Select.Group>
+				<Select.GroupHeading>Icon Type</Select.GroupHeading>
+				{#each iconOptionsArray as [label, value]}
+					<Select.Item {value}>{label}</Select.Item>
+				{/each}
+			</Select.Group>
+		</Select.Content>
+	</Select.Root>
+	<Textarea bind:value={icon.value} placeholder="Icon Value" />
+	{#if icon.type === IconEnum.Iconify}
+		<Button onclick={() => open("https://icon-sets.iconify.design/")} size="sm" variant="secondary">
+			Pick Iconify icon name
+		</Button>
+	{/if}
+
+	<div class="flex items-center space-x-2">
+		<Checkbox id="terms" bind:checked={icon.invert} aria-labelledby="terms-label" />
+		<Label
+			id="terms-label"
+			for="terms"
+			class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+		>
+			Invert Icon Color
+		</Label>
+	</div>
+	<h2 class="font-semibold">Icon Preview</h2>
+	{#if icon.type && icon.value && icon.value.length > 0}
+		<IconMultiplexer class="h-12 w-12" {icon} />
+	{/if}
+</div>
diff --git a/packages/ui/src/components/common/IconSelectorDialog.svelte b/packages/ui/src/components/common/IconSelectorDialog.svelte
new file mode 100644
index 0000000..b6d537c
--- /dev/null
+++ b/packages/ui/src/components/common/IconSelectorDialog.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Icon, IconEnum, IconType } from "@kksh/api/models"
+	import { Button, ButtonModule, Dialog, Input, Label, Select } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { ImageIcon } from "lucide-svelte"
+	import IconMultiplexer from "./IconMultiplexer.svelte"
+
+	const { icon, class: className }: { icon?: Icon; class?: string } = $props()
+	function onClick(e: MouseEvent) {
+		e.preventDefault()
+		e.stopPropagation()
+		console.log("clicked")
+	}
+
+	let iconType = $state<string>(icon?.type ?? IconEnum.Iconify)
+	const iconOptions: Record<string, IconType> = {
+		Iconify: IconEnum.Iconify,
+		"Remote Url": IconEnum.RemoteUrl,
+		Svg: IconEnum.Svg,
+		"Base64 PNG": IconEnum.Base64PNG,
+		Text: IconEnum.Text
+	}
+	const iconOptionsArray = $derived(Object.entries(iconOptions))
+	const triggerContent = $derived(
+		iconOptionsArray.find(([_, value]) => value === iconType)?.[0] ?? "Select a fruit"
+	)
+</script>
+
+<button class={cn("block h-12 w-12", className)} onclick={onClick}>
+	{#if icon}
+		<IconMultiplexer {icon} />
+	{:else}
+		<ImageIcon class="h-full w-full" />
+	{/if}
+</button>
+
+<Dialog.Root open={true}>
+	<Dialog.Trigger class={ButtonModule.buttonVariants({ variant: "outline" })}>
+		Select Icon
+	</Dialog.Trigger>
+	<Dialog.Content class="sm:max-w-[425px]">
+		<Dialog.Header>
+			<Dialog.Title>Select Icon</Dialog.Title>
+			<!-- <Dialog.Description></Dialog.Description> -->
+		</Dialog.Header>
+
+		<Select.Root type="single" name="icontype" bind:value={iconType}>
+			<Select.Trigger class="w-[180px]">
+				{triggerContent}
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Group>
+					<Select.GroupHeading>Fruits</Select.GroupHeading>
+					{#each iconOptionsArray as [label, value]}
+						<Select.Item {value}>{label}</Select.Item>
+					{/each}
+				</Select.Group>
+			</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>
+				<Input id="name" value="Pedro Duarte" class="col-span-3" />
+			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label for="username" class="text-right">Username</Label>
+				<Input id="username" value="@peduarte" class="col-span-3" />
+			</div>
+		</div> -->
+		<Dialog.Footer>
+			<Button type="submit">Save</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/packages/ui/src/components/common/IconSelectorForm.svelte b/packages/ui/src/components/common/IconSelectorForm.svelte
new file mode 100644
index 0000000..e69de29
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 9374b63..92920a6 100644
--- a/packages/ui/src/components/common/index.ts
+++ b/packages/ui/src/components/common/index.ts
@@ -1 +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/error/raw-error-json-preset.svelte b/packages/ui/src/components/error/raw-error-json-preset.svelte
index 8f13239..c02b244 100644
--- a/packages/ui/src/components/error/raw-error-json-preset.svelte
+++ b/packages/ui/src/components/error/raw-error-json-preset.svelte
@@ -1,22 +1,25 @@
 <script lang="ts">
+	import autoAnimate from "@formkit/auto-animate"
 	import Icon from "@iconify/svelte"
-	import { Button, ScrollArea } from "@kksh/svelte5"
+	import { Button, ButtonModule, Collapsible, ScrollArea } from "@kksh/svelte5"
 	import { Error, Layouts, Shiki } from "@kksh/ui"
+	import { ChevronsUpDown } from "lucide-svelte"
 	import { type Snippet } from "svelte"
+	import { fade, slide } from "svelte/transition"
 
 	const {
 		title,
 		message,
 		class: className,
 		rawJsonError,
-		onnGoBack,
-		footer
+		onGoBack,
+		footer: footer2
 	}: {
 		title: string
 		message: string
 		class?: string
 		rawJsonError: string
-		onnGoBack?: () => void
+		onGoBack?: () => void
 		footer?: Snippet
 	} = $props()
 
@@ -38,15 +41,27 @@
 <svelte:window on:keydown={handleKeyDown} on:keyup={handleKeyUp} />
 
 <Error.General {title} {message} class={className}>
-	<ScrollArea class="" orientation="both">
-		<Shiki class="" code={rawJsonError} lang="json" />
-	</ScrollArea>
+	<Collapsible.Root class="w-full space-y-2">
+		<div class="flex items-center justify-between space-x-4 px-4">
+			<h4 class="text-sm font-semibold">Raw Error JSON</h4>
+			<Collapsible.Trigger
+				class={ButtonModule.buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}
+			>
+				<ChevronsUpDown class="size-4" />
+			</Collapsible.Trigger>
+		</div>
+		<Collapsible.Content class="space-y-2">
+			<ScrollArea class="h-64" orientation="both">
+				<Shiki class="" code={rawJsonError} lang="json" />
+			</ScrollArea>
+		</Collapsible.Content>
+	</Collapsible.Root>
 	<br />
 	{#snippet footer()}
-		{#if footer}
-			{@render footer()}
+		{#if footer2}
+			{@render footer2()}
 		{:else}
-			<Button variant="default" class="w-full" onclick={onnGoBack} disabled={enterDown}>
+			<Button variant="default" class="w-full" onclick={onGoBack} disabled={enterDown}>
 				Go Back
 				<Icon icon="mi:enter" />
 			</Button>
diff --git a/packages/ui/src/components/extension/PermissionInspector.svelte b/packages/ui/src/components/extension/PermissionInspector.svelte
index d813696..3917046 100644
--- a/packages/ui/src/components/extension/PermissionInspector.svelte
+++ b/packages/ui/src/components/extension/PermissionInspector.svelte
@@ -20,7 +20,6 @@
 			<HoverCard.Root>
 				<HoverCard.Trigger class="flex items-center">
 					<IconMultiplexer
-						class="border"
 						icon={{
 							type: IconEnum.Iconify,
 							value: "material-symbols:info-outline"
diff --git a/packages/ui/src/components/extension/StoreExtDetail.svelte b/packages/ui/src/components/extension/StoreExtDetail.svelte
index 9ef7d0c..b29a909 100644
--- a/packages/ui/src/components/extension/StoreExtDetail.svelte
+++ b/packages/ui/src/components/extension/StoreExtDetail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import autoAnimate from "@formkit/auto-animate"
 	import Icon from "@iconify/svelte"
-	import { ExtPackageJsonExtra, IconEnum, KunkunExtManifest } from "@kksh/api/models"
+	import { ExtPackageJson, IconEnum, KunkunExtManifest } from "@kksh/api/models"
 	import { type Tables } from "@kksh/api/supabase/types"
 	import { Button, ScrollArea, Separator } from "@kksh/svelte5"
 	import { Constants, IconMultiplexer } from "@kksh/ui"
@@ -26,7 +26,7 @@
 		imageDialogOpen = $bindable(false)
 	}: {
 		ext: Tables<"ext_publish">
-		installedExt?: ExtPackageJsonExtra
+		installedExt?: ExtPackageJson
 		manifest: KunkunExtManifest
 		demoImages: string[]
 		class?: string
@@ -116,7 +116,7 @@
 {/snippet}
 
 <div data-tauri-drag-region class="h-14"></div>
-<ScrollArea class="container pb-12">
+<ScrollArea class={cn("w-full pb-12", className)}>
 	<div class="flex items-center gap-4">
 		<span class="h-12 w-12">
 			<IconMultiplexer
@@ -125,8 +125,8 @@
 				data-flip-id={`${Constants.CLASSNAMES.EXT_LOGO}-${ext.identifier}`}
 			/>
 		</span>
-		<div>
-			<span class="flex items-center">
+		<div class="w-full">
+			<span class="flex w-full items-center" use:autoAnimate>
 				<strong class="ext-name text-xl">{manifest?.name}</strong>
 				{#if isInstalled}
 					<CircleCheckBigIcon class="ml-2 inline text-green-400" />
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/BuiltinCmds.svelte b/packages/ui/src/components/main/BuiltinCmds.svelte
index d4ca49d..6ef23de 100644
--- a/packages/ui/src/components/main/BuiltinCmds.svelte
+++ b/packages/ui/src/components/main/BuiltinCmds.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { IconEnum } from "@kksh/api/models"
+	import { CmdTypeEnum, IconEnum } from "@kksh/api/models"
 	import { Command } from "@kksh/svelte5"
 	import { IconMultiplexer } from "@kksh/ui"
-	import { DraggableCommandGroup } from "@kksh/ui/custom"
-	import type { BuiltinCmd } from "./types"
+	import { DraggableCommandGroup } from "../custom"
+	import type { BuiltinCmd, CmdValue } from "./types"
 
 	const { builtinCmds }: { builtinCmds: BuiltinCmd[] } = $props()
 </script>
@@ -15,6 +15,10 @@
 			onSelect={() => {
 				cmd.function()
 			}}
+			value={JSON.stringify({
+				cmdName: cmd.name,
+				cmdType: CmdTypeEnum.Builtin
+			} satisfies CmdValue)}
 		>
 			<span class="flex gap-2">
 				<IconMultiplexer
diff --git a/packages/ui/src/components/main/CustomCommandInput.svelte b/packages/ui/src/components/main/CustomCommandInput.svelte
index bf528b5..a5b5ae7 100644
--- a/packages/ui/src/components/main/CustomCommandInput.svelte
+++ b/packages/ui/src/components/main/CustomCommandInput.svelte
@@ -8,9 +8,11 @@
 		class: className,
 		value = $bindable(""),
 		leftSlot,
+		rightSlot,
 		...restProps
 	}: CommandPrimitive.InputProps & {
 		leftSlot?: Snippet
+		rightSlot?: Snippet
 	} = $props()
 </script>
 
@@ -25,4 +27,5 @@
 		bind:value
 		{...restProps}
 	/>
+	{@render rightSlot?.()}
 </div>
diff --git a/packages/ui/src/components/main/ExtCmdsGroup.svelte b/packages/ui/src/components/main/ExtCmdsGroup.svelte
index 59652b9..62102c8 100644
--- a/packages/ui/src/components/main/ExtCmdsGroup.svelte
+++ b/packages/ui/src/components/main/ExtCmdsGroup.svelte
@@ -1,11 +1,11 @@
 <!-- This file renders a group of extension commands -->
 <!-- Input props to this component is an array of ExtPackageJsonExtra[] -->
 <script lang="ts">
-	import { CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
+	import { CmdTypeEnum, CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
 	import { Badge, Command } from "@kksh/svelte5"
 	import { IconMultiplexer } from "@kksh/ui"
-	import { DraggableCommandGroup } from "@kksh/ui/custom"
-	import type { OnExtCmdSelect } from "./types"
+	import { DraggableCommandGroup } from "../custom"
+	import type { CmdValue, OnExtCmdSelect } from "./types"
 
 	const {
 		extensions,
@@ -28,6 +28,11 @@
 		onSelect={() => {
 			onExtCmdSelect(ext, cmd, { isDev, hmr })
 		}}
+		value={JSON.stringify({
+			cmdName: cmd.name,
+			cmdType: cmd.type,
+			data: { isDev: heading === "Dev Extensions" }
+		} satisfies CmdValue)}
 	>
 		<span class="flex gap-2">
 			<IconMultiplexer icon={cmd.icon ?? ext.kunkun.icon} class="!h-5 !w-5 shrink-0" />
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/components/main/QuickLinks.svelte b/packages/ui/src/components/main/QuickLinks.svelte
new file mode 100644
index 0000000..402bc61
--- /dev/null
+++ b/packages/ui/src/components/main/QuickLinks.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { CmdTypeEnum, IconEnum } from "@kksh/api/models"
+	import { Command } from "@kksh/svelte5"
+	import { IconMultiplexer } from "@kksh/ui"
+	import { DraggableCommandGroup } from "../custom"
+	import { CmdValue, type CmdQuery, type QuickLink } from "./types"
+
+	const { quickLinks }: { quickLinks: QuickLink[] } = $props()
+</script>
+
+<DraggableCommandGroup heading="Quick Links">
+	{#each quickLinks as cmd}
+		<Command.Item
+			class="flex justify-between"
+			onSelect={() => {
+				console.log(cmd)
+			}}
+			keywords={["quick", "link"]}
+			value={JSON.stringify({
+				cmdName: cmd.name,
+				cmdType: CmdTypeEnum.QuickLink,
+				data: cmd.link
+			} satisfies CmdValue)}
+		>
+			<span class="flex gap-2">
+				<IconMultiplexer icon={cmd.icon} class="!h-5 !w-5 shrink-0" />
+				<span>{cmd.name}</span>
+			</span>
+		</Command.Item>
+	{/each}
+</DraggableCommandGroup>
diff --git a/packages/ui/src/components/main/SystemCmds.svelte b/packages/ui/src/components/main/SystemCmds.svelte
new file mode 100644
index 0000000..afa59dc
--- /dev/null
+++ b/packages/ui/src/components/main/SystemCmds.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { CmdTypeEnum, IconEnum, SysCommand } from "@kksh/api/models"
+	import { Command } from "@kksh/svelte5"
+	import { IconMultiplexer } from "@kksh/ui"
+	import { DraggableCommandGroup } from "../custom"
+	import { CmdValue } from "./types"
+
+	const { systemCommands }: { systemCommands: SysCommand[] } = $props()
+</script>
+
+<DraggableCommandGroup heading="System Commands">
+	{#each systemCommands as cmd}
+		<Command.Item
+			class="flex justify-between"
+			onSelect={() => {
+				cmd.function()
+			}}
+			value={JSON.stringify({
+				cmdName: cmd.name,
+				cmdType: CmdTypeEnum.System
+			} satisfies CmdValue)}
+		>
+			<span class="flex gap-2">
+				{#if cmd.icon}
+					<IconMultiplexer icon={cmd.icon} class="!h-5 !w-5 shrink-0" />
+				{/if}
+				<span>{cmd.name}</span>
+			</span>
+		</Command.Item>
+	{/each}
+</DraggableCommandGroup>
diff --git a/packages/ui/src/components/main/index.ts b/packages/ui/src/components/main/index.ts
index 7ff257d..a66c3ee 100644
--- a/packages/ui/src/components/main/index.ts
+++ b/packages/ui/src/components/main/index.ts
@@ -2,4 +2,6 @@ export { default as BuiltinCmds } from "./BuiltinCmds.svelte"
 export { default as CustomCommandInput } from "./CustomCommandInput.svelte"
 export { default as GlobalCommandPaletteFooter } from "./GlobalCommandPaletteFooter.svelte"
 export { default as ExtCmdsGroup } from "./ExtCmdsGroup.svelte"
+export { default as SystemCmds } from "./SystemCmds.svelte"
+export { default as QuickLinks } from "./QuickLinks.svelte"
 export * from "./types"
diff --git a/packages/ui/src/components/main/types.ts b/packages/ui/src/components/main/types.ts
index c8492a1..fe12236 100644
--- a/packages/ui/src/components/main/types.ts
+++ b/packages/ui/src/components/main/types.ts
@@ -1,4 +1,11 @@
-import type { CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
+import {
+	CmdType,
+	Icon,
+	type CustomUiCmd,
+	type ExtPackageJsonExtra,
+	type TemplateUiCmd
+} from "@kksh/api/models"
+import * as v from "valibot"
 
 export type BuiltinCmd = {
 	name: string
@@ -15,4 +22,18 @@ export type OnExtCmdSelect = (
 
 export type CommandLaunchers = {
 	onExtCmdSelect: OnExtCmdSelect
+	onQuickLinkSelect: (quickLink: CmdValue, queries: CmdQuery[]) => void
 }
+
+/**
+ * Command Value used in the command search
+ */
+export const CmdValue = v.object({
+	cmdName: v.string(),
+	cmdType: CmdType,
+	data: v.optional(v.any())
+})
+export type CmdValue = v.InferOutput<typeof CmdValue>
+
+export type CmdQuery = { name: string; value: string }
+export type QuickLink = { name: string; link: string; icon: Icon }
diff --git a/packages/ui/src/components/theme/mode-toggle.svelte b/packages/ui/src/components/theme/mode-toggle.svelte
new file mode 100644
index 0000000..c6d2ccd
--- /dev/null
+++ b/packages/ui/src/components/theme/mode-toggle.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Button } from "@kksh/svelte5"
+	import Moon from "lucide-svelte/icons/moon"
+	import Sun from "lucide-svelte/icons/sun"
+	import { toggleMode } from "mode-watcher"
+</script>
+
+<Button onclick={toggleMode} variant="outline" size="icon">
+	<Sun
+		class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+	/>
+	<Moon
+		class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+	/>
+	<span class="sr-only">Toggle theme</span>
+</Button>
diff --git a/packages/ui/src/components/ui/form/form-button.svelte b/packages/ui/src/components/ui/form/form-button.svelte
new file mode 100644
index 0000000..a447118
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-button.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ButtonModule } from "@kksh/svelte5"
+
+	let { ref = $bindable(null), ...restProps }: ButtonModule.Props = $props()
+</script>
+
+<ButtonModule.Root type="submit" bind:ref {...restProps} />
diff --git a/packages/ui/src/components/ui/form/form-description.svelte b/packages/ui/src/components/ui/form/form-description.svelte
new file mode 100644
index 0000000..cc21450
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.DescriptionProps> = $props()
+</script>
+
+<FormPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-[0.8rem]", className)}
+	{...restProps}
+/>
diff --git a/packages/ui/src/components/ui/form/form-element-field.svelte b/packages/ui/src/components/ui/form/form-element-field.svelte
new file mode 100644
index 0000000..4d084cf
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-element-field.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { FormPathLeaves as _FormPathLeaves } from "sveltekit-superforms"
+
+	type T = Record<string, unknown>
+	type U = _FormPathLeaves<T>
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T>">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithElementRef } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+	import type { HTMLAttributes } from "svelte/elements"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> &
+		FormPrimitive.ElementFieldProps<T, U> = $props()
+</script>
+
+<FormPrimitive.ElementField {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.ElementField>
diff --git a/packages/ui/src/components/ui/form/form-field-errors.svelte b/packages/ui/src/components/ui/form/form-field-errors.svelte
new file mode 100644
index 0000000..2580d55
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-field-errors.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		errorClasses,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldErrorsProps> & {
+		errorClasses?: string | undefined | null
+	} = $props()
+</script>
+
+<FormPrimitive.FieldErrors
+	class={cn("text-destructive text-[0.8rem] font-medium", className)}
+	{...restProps}
+>
+	{#snippet children({ errors, errorProps })}
+		{#if childrenProp}
+			{@render childrenProp({ errors, errorProps })}
+		{:else}
+			{#each errors as error}
+				<div {...errorProps} class={cn(errorClasses)}>{error}</div>
+			{/each}
+		{/if}
+	{/snippet}
+</FormPrimitive.FieldErrors>
diff --git a/packages/ui/src/components/ui/form/form-field.svelte b/packages/ui/src/components/ui/form/form-field.svelte
new file mode 100644
index 0000000..57f9107
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-field.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { FormPath as _FormPath } from "sveltekit-superforms"
+
+	type T = Record<string, unknown>
+	type U = _FormPath<T>
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithElementRef, WithoutChildren } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+	import type { HTMLAttributes } from "svelte/elements"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: FormPrimitive.FieldProps<T, U> &
+		WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props()
+</script>
+
+<FormPrimitive.Field {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.Field>
diff --git a/packages/ui/src/components/ui/form/form-fieldset.svelte b/packages/ui/src/components/ui/form/form-fieldset.svelte
new file mode 100644
index 0000000..2e46184
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-fieldset.svelte
@@ -0,0 +1,22 @@
+<script lang="ts" module>
+	import type { FormPath as _FormPath } from "sveltekit-superforms"
+
+	type T = Record<string, unknown>
+	type U = _FormPath<T>
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldsetProps<T, U>> = $props()
+</script>
+
+<FormPrimitive.Fieldset bind:ref {form} {name} class={cn("space-y-2", className)} {...restProps} />
diff --git a/packages/ui/src/components/ui/form/form-label.svelte b/packages/ui/src/components/ui/form/form-label.svelte
new file mode 100644
index 0000000..952670f
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LabelProps> = $props()
+</script>
+
+<FormPrimitive.Label {...restProps} bind:ref>
+	{#snippet child({ props })}
+		<Label {...props} class={cn("data-[fs-error]:text-destructive", className)}>
+			{@render children?.()}
+		</Label>
+	{/snippet}
+</FormPrimitive.Label>
diff --git a/packages/ui/src/components/ui/form/form-legend.svelte b/packages/ui/src/components/ui/form/form-legend.svelte
new file mode 100644
index 0000000..c82042f
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-legend.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LegendProps> = $props()
+</script>
+
+<FormPrimitive.Legend
+	bind:ref
+	{...restProps}
+	class={cn("data-[fs-error]:text-destructive text-sm font-medium leading-none", className)}
+/>
diff --git a/packages/ui/src/components/ui/form/index.ts b/packages/ui/src/components/ui/form/index.ts
new file mode 100644
index 0000000..bfb9159
--- /dev/null
+++ b/packages/ui/src/components/ui/form/index.ts
@@ -0,0 +1,33 @@
+import * as FormPrimitive from "formsnap"
+import Button from "./form-button.svelte"
+import Description from "./form-description.svelte"
+import ElementField from "./form-element-field.svelte"
+import FieldErrors from "./form-field-errors.svelte"
+import Field from "./form-field.svelte"
+import Fieldset from "./form-fieldset.svelte"
+import Label from "./form-label.svelte"
+import Legend from "./form-legend.svelte"
+
+const Control = FormPrimitive.Control as typeof FormPrimitive.Control
+
+export {
+	Field,
+	Control,
+	Label,
+	FieldErrors,
+	Description,
+	Fieldset,
+	Legend,
+	ElementField,
+	Button,
+	//
+	Field as FormField,
+	Control as FormControl,
+	Description as FormDescription,
+	Label as FormLabel,
+	FieldErrors as FormFieldErrors,
+	Fieldset as FormFieldset,
+	Legend as FormLegend,
+	ElementField as FormElementField,
+	Button as FormButton
+}
diff --git a/packages/ui/src/components/ui/label/index.ts b/packages/ui/src/components/ui/label/index.ts
new file mode 100644
index 0000000..7a80917
--- /dev/null
+++ b/packages/ui/src/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte"
+
+export {
+	Root,
+	//
+	Root as Label
+}
diff --git a/packages/ui/src/components/ui/label/label.svelte b/packages/ui/src/components/ui/label/label.svelte
new file mode 100644
index 0000000..b70f58d
--- /dev/null
+++ b/packages/ui/src/components/ui/label/label.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import { Label as LabelPrimitive } from "bits-ui"
+
+	let { ref = $bindable(null), class: className, ...restProps }: LabelPrimitive.RootProps = $props()
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 6d40e1a..462f48c 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,11 +1,14 @@
 export { default as Shiki } from "./components/code/shiki.svelte"
-export { IconMultiplexer } from "./components/common"
+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"
 export { default as GridAnimation } from "./components/animation/grid-animation.svelte"
 export { default as ViewTransition } from "./components/transition/view-transition.svelte"
 export * as Constants from "./constants"
+export * as Form from "./components/ui/form"
+export { default as ModeToggle } from "./components/theme/mode-toggle.svelte"
diff --git a/packages/ui/src/utils/command-score.ts b/packages/ui/src/utils/command-score.ts
new file mode 100644
index 0000000..0e6c837
--- /dev/null
+++ b/packages/ui/src/utils/command-score.ts
@@ -0,0 +1,175 @@
+// This file is taken from https://github.com/huntabyte/bits-ui/blob/7f7bf6f6b736cf34e57a0d87aab01074c33efd46/packages/bits-ui/src/lib/bits/command/command.svelte.ts#L1
+
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-nocheck
+// The scores are arranged so that a continuous match of characters will
+// result in a total score of 1.
+//
+// The best case, this character is a match, and either this is the start
+// of the string, or the previous character was also a match.
+const SCORE_CONTINUE_MATCH = 1
+// A new match at the start of a word scores better than a new match
+// elsewhere as it's more likely that the user will type the starts
+// of fragments.
+// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
+// hyphens, etc.
+const SCORE_SPACE_WORD_JUMP = 0.9
+const SCORE_NON_SPACE_WORD_JUMP = 0.8
+// Any other match isn't ideal, but we include it for completeness.
+const SCORE_CHARACTER_JUMP = 0.17
+// If the user transposed two letters, it should be significantly penalized.
+//
+// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
+const SCORE_TRANSPOSITION = 0.1
+// The goodness of a match should decay slightly with each missing
+// character.
+//
+// i.e. "bad" is more likely than "bard" when "bd" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 100 characters are inserted between matches.
+const PENALTY_SKIPPED = 0.999
+// The goodness of an exact-case match should be higher than a
+// case-insensitive match by a small amount.
+//
+// i.e. "HTML" is more likely than "haml" when "HM" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 1000 characters are inserted between matches.
+const PENALTY_CASE_MISMATCH = 0.9999
+// Match higher for letters closer to the beginning of the word
+const PENALTY_DISTANCE_FROM_START = 0.9
+// If the word has more characters than the user typed, it should
+// be penalised slightly.
+//
+// i.e. "html" is more likely than "html5" if I type "html".
+//
+// However, it may well be the case that there's a sensible secondary
+// ordering (like alphabetical) that it makes sense to rely on when
+// there are many prefix matches, so we don't make the penalty increase
+// with the number of tokens.
+const PENALTY_NOT_COMPLETE = 0.99
+
+const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/
+const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g
+const IS_SPACE_REGEXP = /[\s-]/
+const COUNT_SPACE_REGEXP = /[\s-]/g
+
+function commandScoreInner(
+	string,
+	abbreviation,
+	lowerString,
+	lowerAbbreviation,
+	stringIndex,
+	abbreviationIndex,
+	memoizedResults
+) {
+	if (abbreviationIndex === abbreviation.length) {
+		if (stringIndex === string.length) {
+			return SCORE_CONTINUE_MATCH
+		}
+		return PENALTY_NOT_COMPLETE
+	}
+
+	const memoizeKey = `${stringIndex},${abbreviationIndex}`
+	if (memoizedResults[memoizeKey] !== undefined) {
+		return memoizedResults[memoizeKey]
+	}
+
+	const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex)
+	let index = lowerString.indexOf(abbreviationChar, stringIndex)
+	let highScore = 0
+
+	let score, transposedScore, wordBreaks, spaceBreaks
+
+	while (index >= 0) {
+		score = commandScoreInner(
+			string,
+			abbreviation,
+			lowerString,
+			lowerAbbreviation,
+			index + 1,
+			abbreviationIndex + 1,
+			memoizedResults
+		)
+		if (score > highScore) {
+			if (index === stringIndex) {
+				score *= SCORE_CONTINUE_MATCH
+			} else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_NON_SPACE_WORD_JUMP
+				wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP)
+				if (wordBreaks && stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** wordBreaks.length
+				}
+			} else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_SPACE_WORD_JUMP
+				spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP)
+				if (spaceBreaks && stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** spaceBreaks.length
+				}
+			} else {
+				score *= SCORE_CHARACTER_JUMP
+				if (stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** (index - stringIndex)
+				}
+			}
+
+			if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+				score *= PENALTY_CASE_MISMATCH
+			}
+		}
+
+		if (
+			(score < SCORE_TRANSPOSITION &&
+				lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+			(lowerAbbreviation.charAt(abbreviationIndex + 1) ===
+				lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
+				lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))
+		) {
+			transposedScore = commandScoreInner(
+				string,
+				abbreviation,
+				lowerString,
+				lowerAbbreviation,
+				index + 1,
+				abbreviationIndex + 2,
+				memoizedResults
+			)
+
+			if (transposedScore * SCORE_TRANSPOSITION > score) {
+				score = transposedScore * SCORE_TRANSPOSITION
+			}
+		}
+
+		if (score > highScore) {
+			highScore = score
+		}
+
+		index = lowerString.indexOf(abbreviationChar, index + 1)
+	}
+
+	memoizedResults[memoizeKey] = highScore
+	return highScore
+}
+
+function formatInput(string) {
+	// convert all valid space characters to space so they match each other
+	return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ")
+}
+
+export function commandScore(string: string, abbreviation: string, aliases?: string[]): number {
+	/* NOTE:
+	 * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
+	 * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
+	 */
+	string = aliases && aliases.length > 0 ? `${`${string} ${aliases?.join(" ")}`}` : string
+	return commandScoreInner(
+		string,
+		abbreviation,
+		formatInput(string),
+		formatInput(abbreviation),
+		0,
+		0,
+		{}
+	)
+}
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 9c56bda..a87d0db 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,3 +1,7 @@
 {
-	"extends": "../typescript-config/base.json"
+	"extends": "../typescript-config/base.json",
+	"compilerOptions": {
+		"verbatimModuleSyntax": true
+	},
+	"include": ["src/**/*"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 010c4eb..5caf9ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,8 +88,8 @@ importers:
         specifier: workspace:*
         version: link:packages/api
       '@kksh/svelte5':
-        specifier: 0.1.2-beta.4
-        version: 0.1.2-beta.4(lucide-svelte@0.454.0(svelte@5.1.9))(svelte-sonner@0.3.28(svelte@5.1.9))(svelte@5.1.9)
+        specifier: 0.1.2-beta.8
+        version: 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)
       prettier:
         specifier: ^3.2.5
         version: 3.3.3
@@ -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
@@ -153,6 +156,9 @@ importers:
       mode-watcher:
         specifier: ^0.4.1
         version: 0.4.1(svelte@5.1.9)
+      semver:
+        specifier: ^7.6.3
+        version: 7.6.3
       svelte-radix:
         specifier: ^2.0.1
         version: 2.0.1(svelte@5.1.9)
@@ -162,6 +168,9 @@ importers:
       sveltekit-superforms:
         specifier: ^2.20.0
         version: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
+      uuid:
+        specifier: ^11.0.2
+        version: 11.0.2
     devDependencies:
       '@kksh/types':
         specifier: workspace:*
@@ -193,6 +202,12 @@ importers:
       '@types/bun':
         specifier: latest
         version: 1.1.13
+      '@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)
@@ -223,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)
@@ -395,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':
@@ -406,9 +471,6 @@ importers:
       '@kksh/supabase':
         specifier: workspace:*
         version: link:../supabase
-      '@supabase/supabase-js':
-        specifier: ^2.43.4
-        version: 2.46.1
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -422,15 +484,15 @@ importers:
       '@types/bun':
         specifier: latest
         version: 1.1.13
-      supabase:
-        specifier: '>=1.8.1'
-        version: 1.207.9
 
   packages/supabase:
     dependencies:
       '@kksh/api':
         specifier: workspace:*
         version: link:../api
+      '@supabase/supabase-js':
+        specifier: ^2.46.1
+        version: 2.46.1
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -456,25 +518,40 @@ 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
+        version: 4.0.2(svelte@5.1.9)
       '@kksh/api':
         specifier: workspace:*
         version: link:../api
+      '@kksh/svelte5':
+        specifier: ^0.1.2-beta.8
+        version: 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)
       '@types/bun':
         specifier: latest
         version: 1.1.13
       bits-ui:
-        specifier: 1.0.0-next.36
-        version: 1.0.0-next.36(svelte@5.1.9)
+        specifier: 1.0.0-next.45
+        version: 1.0.0-next.45(svelte@5.1.9)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      formsnap:
+        specifier: 2.0.0-next.1
+        version: 2.0.0-next.1(svelte@5.1.9)(sveltekit-superforms@2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3))
       lucide-svelte:
         specifier: ^0.454.0
         version: 0.454.0(svelte@5.1.9)
@@ -493,6 +570,9 @@ importers:
       svelte-sonner:
         specifier: ^0.3.28
         version: 0.3.28(svelte@5.1.9)
+      sveltekit-superforms:
+        specifier: ^2.20.0
+        version: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
       tailwind-merge:
         specifier: ^2.5.4
         version: 2.5.4
@@ -505,6 +585,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
 
   packages/utils:
     dependencies:
@@ -579,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==}
 
@@ -885,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'}
@@ -897,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'}
@@ -909,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'}
@@ -921,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'}
@@ -933,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'}
@@ -945,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'}
@@ -957,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'}
@@ -969,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'}
@@ -981,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'}
@@ -993,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'}
@@ -1005,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'}
@@ -1017,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'}
@@ -1029,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'}
@@ -1041,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'}
@@ -1053,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'}
@@ -1065,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'}
@@ -1077,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'}
@@ -1089,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'}
@@ -1107,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'}
@@ -1119,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'}
@@ -1131,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'}
@@ -1143,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'}
@@ -1155,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'}
@@ -1241,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==}
 
@@ -1273,15 +1509,21 @@ 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}
 
-  '@kksh/svelte5@0.1.2-beta.4':
-    resolution: {integrity: sha512-QUA3wl4aOUcnfTo37/l37fWlhwf0lbtnNugDiwBJgrjaLeNF6nEzlYFKxxsA7erR6hY6VZCeVlf01S3ZgPva4w==}
+  '@kksh/svelte5@0.1.2-beta.8':
+    resolution: {integrity: sha512-cXReqYbZ/KXICucNREz6T/1DguTlGjvkq2qlUriYH/lgfgsUjbq8ZPhVsCIb0qlDT9IYIu5Pc/8X+azGqFirRA==}
     peerDependencies:
-      lucide-svelte: ^0.416.0
-      svelte: ^5.0.0
-      svelte-sonner: ^0.3.27
+      lucide-svelte: ^0.454.0
+      svelte: ^5.1.10
+      svelte-sonner: ^0.3.28
 
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
@@ -1326,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'}
@@ -1745,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==}
 
@@ -1822,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==}
 
@@ -1840,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==}
 
@@ -1892,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==}
 
@@ -1907,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==}
 
@@ -1996,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'}
@@ -2016,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==}
 
@@ -2135,6 +2504,12 @@ packages:
     peerDependencies:
       svelte: ^5.0.0-next.1
 
+  bits-ui@1.0.0-next.45:
+    resolution: {integrity: sha512-kt7gYIirEo2Rg1hMudcGEzSHogQTA22d/j1x8v+wIshsIqqcCN6DXJZpTojSCQWxny8IEa9CRnLwAzY4B2qf1Q==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.0.0-next.1
+
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
@@ -2165,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'}
@@ -2223,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'}
@@ -2242,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:
@@ -2278,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==}
 
@@ -2292,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'}
@@ -2327,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'}
@@ -2336,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'}
@@ -2407,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==}
 
@@ -2458,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'}
@@ -2644,6 +3068,13 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.1
       sveltekit-superforms: ^2.3.0
 
+  formsnap@2.0.0-next.1:
+    resolution: {integrity: sha512-ha8r9eMmsGEGMY+ljV3FEyTtB72E7dt95y9HHUbCcaDnjbz3Q6n00BHLz7dfBZ9rqyaMeIO200EmP1IcYMExeg==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.0.0
+      sveltekit-superforms: ^2.19.0
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -2678,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'}
@@ -2729,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'}
@@ -2753,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'}
@@ -2771,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'}
@@ -2800,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'}
@@ -2816,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'}
@@ -2828,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==}
 
@@ -2854,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==}
 
@@ -2864,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==}
 
@@ -2920,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'}
@@ -2941,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==}
 
@@ -3009,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==}
 
@@ -3076,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:
@@ -3126,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}
@@ -3161,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==}
 
@@ -3171,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'}
@@ -3256,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==}
 
@@ -3282,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'}
@@ -3520,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'}
@@ -3541,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
@@ -3562,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'}
@@ -3638,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'}
@@ -3657,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==}
 
@@ -3757,11 +4290,16 @@ packages:
       svelte:
         optional: true
 
-  svelte-persisted-store@0.11.0:
-    resolution: {integrity: sha512-9RgJ5DrawGyyfK22A80cfu8Jose3CV8YjEZKz9Tn94rQ0tWyEmYr+XI+wrVF6wjRbW99JMDSVcFRiM3XzVJj/w==}
+  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'}
     peerDependencies:
-      svelte: ^3.48.0 || ^4.0.0 || ^5.0.0-next.0
+      svelte: ^3.48.0 || ^4 || ^5
 
   svelte-radix@2.0.1:
     resolution: {integrity: sha512-YrX44Dj+Rp6YZuPSjdmyd6P8QTkb2NXwySUCZYzjwkP6Cl3dZaTBPPeaSOutP3v3ycQ2XwyNOpyn4p0QcN+uYQ==}
@@ -3862,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'}
@@ -3917,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]
@@ -3983,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==}
 
@@ -4012,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
@@ -4113,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'}
@@ -4170,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==}
 
@@ -4189,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'}
@@ -4219,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
@@ -4990,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
 
@@ -5229,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
@@ -5269,13 +5956,33 @@ 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.4(lucide-svelte@0.454.0(svelte@5.1.9))(svelte-sonner@0.3.28(svelte@5.1.9))(svelte@5.1.9)':
+  '@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)':
     dependencies:
       lucide-svelte: 0.454.0(svelte@5.1.9)
       svelte: 5.1.9
-      svelte-persisted-store: 0.11.0(svelte@5.1.9)
+      svelte-persisted-store: 0.12.0(svelte@5.1.9)
       svelte-sonner: 0.3.28(svelte@5.1.9)
 
   '@manypkg/find-root@1.1.0':
@@ -5328,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)
@@ -5337,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
@@ -5890,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': {}
@@ -5945,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
@@ -5969,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
@@ -6025,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
@@ -6041,6 +6790,8 @@ snapshots:
 
   '@types/phoenix@1.6.5': {}
 
+  '@types/resolve@1.20.2': {}
+
   '@types/semver@7.5.8': {}
 
   '@types/unist@3.0.3': {}
@@ -6149,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
 
@@ -6194,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):
@@ -6307,6 +7231,16 @@ snapshots:
       svelte: 5.1.9
       svelte-toolbelt: 0.4.6(svelte@5.1.9)
 
+  bits-ui@1.0.0-next.45(svelte@5.1.9):
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/dom': 1.6.12
+      '@internationalized/date': 3.5.6
+      esm-env: 1.1.4
+      runed: 0.15.3(svelte@5.1.9)
+      svelte: 5.1.9
+      svelte-toolbelt: 0.4.6(svelte@5.1.9)
+
   bl@4.1.0:
     dependencies:
       buffer: 5.7.1
@@ -6348,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: {}
@@ -6403,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: {}
@@ -6415,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
@@ -6438,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: {}
@@ -6454,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:
@@ -6475,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
@@ -6486,6 +7450,8 @@ snapshots:
 
   dequal@2.0.3: {}
 
+  destr@2.0.3: {}
+
   detect-indent@6.1.0: {}
 
   detective-amd@6.0.0:
@@ -6564,6 +7530,8 @@ snapshots:
 
   dotenv@16.0.3: {}
 
+  duplexer@0.1.2: {}
+
   eastasianwidth@0.2.0: {}
 
   effect@3.10.8:
@@ -6634,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
@@ -6894,6 +7889,12 @@ snapshots:
       svelte: 5.1.9
       sveltekit-superforms: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
 
+  formsnap@2.0.0-next.1(svelte@5.1.9)(sveltekit-superforms@2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)):
+    dependencies:
+      svelte: 5.1.9
+      svelte-toolbelt: 0.4.6(svelte@5.1.9)
+      sveltekit-superforms: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
+
   fraction.js@4.3.7: {}
 
   fs-extra@11.2.0:
@@ -6928,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
@@ -6985,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:
@@ -7020,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
@@ -7035,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:
@@ -7058,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: {}
@@ -7068,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
@@ -7092,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:
@@ -7102,6 +8141,8 @@ snapshots:
 
   jiti@1.21.6: {}
 
+  jiti@2.0.0-beta.3: {}
+
   joi@17.13.3:
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -7158,6 +8199,8 @@ snapshots:
 
   known-css-properties@0.35.0: {}
 
+  kolorist@1.8.0: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -7176,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:
@@ -7252,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
@@ -7264,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: {}
@@ -7319,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
@@ -7357,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
@@ -7382,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
@@ -7394,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
@@ -7473,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: {}
@@ -7487,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
@@ -7661,6 +8746,8 @@ snapshots:
 
   regex@4.4.0: {}
 
+  require-directory@2.1.1: {}
+
   requirejs-config-file@4.0.0:
     dependencies:
       esprima: 4.0.1
@@ -7674,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
@@ -7695,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
@@ -7782,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
@@ -7801,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:
@@ -7915,7 +9021,13 @@ snapshots:
     optionalDependencies:
       svelte: 5.1.9
 
-  svelte-persisted-store@0.11.0(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
 
@@ -8056,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
@@ -8063,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
@@ -8070,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
@@ -8081,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:
@@ -8109,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
@@ -8164,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
 
@@ -8215,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: {}
@@ -8246,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
@@ -8269,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
@@ -8310,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:
@@ -8356,6 +9587,8 @@ snapshots:
 
   ws@8.18.0: {}
 
+  y18n@5.0.8: {}
+
   yallist@2.1.2: {}
 
   yallist@3.1.1: {}
@@ -8366,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: