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

apps/desktop/src/lib/cmds/builtin.ts

@@ -115,16 +115,15 @@ export const builtinCmds: BuiltinCmd[] = [
 			goto("/troubleshooters/extension-loading")
 		}
 	},
-	// {
-	// 	name: "Create Quicklink",
-	// 	iconifyIcon: "material-symbols:link",
-	// 	description: "Create a Quicklink",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/create-quicklink")
-	// 	}
-	// },
+	{
+		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",

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

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)
+}

apps/desktop/src/lib/components/main/CommandPalette.svelte

@@ -1,89 +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 { systemCommands } from "@/cmds/system"
-	import { devStoreExts, installedStoreExts } from "@/stores"
-	import { getActiveElementNodeName } from "@/utils/dom"
-	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,
-		SystemCmds
-	} 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()
-
-	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>
-
-<svelte:window on:keydown={onKeyDown} />
-<Command.Root
-	class={cn("rounded-lg border shadow-md", className)}
-	bind:value={$appState.highlightedCmd}
-	loop
->
-	<CustomCommandInput
-		autofocus
-		id="main-command-input"
-		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>
-		{#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}
-		<BuiltinCmds {builtinCmds} />
-		<SystemCmds {systemCommands} />
-		<Command.Separator />
-	</Command.List>
-	<GlobalCommandPaletteFooter />
-</Command.Root>

apps/desktop/src/lib/stores/appState.ts

@@ -1,5 +1,8 @@
+import { findAllArgsInLink } from "@/cmds/quick-links"
+import { CmdTypeEnum } from "@kksh/api/models"
 import type { AppState } from "@kksh/types"
-import { get, writable, type Writable } from "svelte/store"
+import type { CmdValue } from "@kksh/ui/types"
+import { derived, get, writable, type Writable } from "svelte/store"
 
 export const defaultAppState: AppState = {
 	searchTerm: "",
@@ -24,3 +27,13 @@ function createAppState(): Writable<AppState> & AppStateAPI {
 }
 
 export const appState = createAppState()
+
+// export const cmdQueries = derived(appState, ($appState) => {
+// 	if ($appState.highlightedCmd.startsWith("{")) {
+// 		const parsedCmd = JSON.parse($appState.highlightedCmd) as CmdValue
+// 		if (parsedCmd.cmdType === CmdTypeEnum.QuickLink && parsedCmd.data) {
+// 			return findAllArgsInLink(parsedCmd.data).map((arg) => ({ name: arg, value: "" }))
+// 		}
+// 	}
+// 	return []
+// })

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()

apps/desktop/src/lib/stores/index.ts

@@ -3,3 +3,4 @@ export * from "./appState"
 export * from "./winExtMap"
 export * from "./extensions"
 export * from "./auth"
+export * from "./quick-links"

apps/desktop/src/lib/stores/quick-links.ts

@@ -0,0 +1,41 @@
+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()
+		console.log(cmds)
+
+		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()

apps/desktop/src/lib/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,
+		{}
+	)
+}

apps/desktop/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <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 {
@@ -21,8 +21,9 @@
 	const unlisteners: UnlistenFn[] = []
 
 	onMount(async () => {
-		unlisteners.push(await attachConsole())
-		unlisteners.push(await initDeeplink())
+		attachConsole().then((unlistener) => unlisteners.push(unlistener))
+		initDeeplink().then((unlistener) => unlisteners.push(unlistener))
+		quickLinks.init()
 		appConfig.init()
 		if (isInMainWindow()) {
 			extensions.init()

apps/desktop/src/routes/+page.svelte

@@ -1,18 +1,135 @@
+<!-- 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 { commandScore } from "@/utils/command-score"
+	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 } 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>
+		<Command.Separator />
+		{#if $appConfig.extensionsInstallDir && $devStoreExts.length > 0}
+			<ExtCmdsGroup
+				extensions={$devStoreExts}
+				heading="Dev Extensions"
+				isDev={true}
+				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
+				hmr={$appConfig.hmr}
+			/>
+			<Command.Separator />
+		{/if}
+		{#if $appConfig.extensionsInstallDir && $installedStoreExts.length > 0}
+			<ExtCmdsGroup
+				extensions={$installedStoreExts}
+				heading="Extensions"
+				isDev={false}
+				hmr={false}
+				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
+			/>
+			<Command.Separator />
+		{/if}
+		<QuickLinks quickLinks={$quickLinks} />
+		<BuiltinCmds {builtinCmds} />
+		<Command.Separator />
+		<SystemCmds {systemCommands} />
+	</Command.List>
+	<GlobalCommandPaletteFooter />
+</Command.Root>

apps/desktop/src/routes/extension/create-quick-link/+page.svelte

@@ -0,0 +1,110 @@
+<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 { createQuickLinkCommand } from "@kksh/extension/db"
+	import { Button, Input } from "@kksh/svelte5"
+	import { Form, IconSelector } from "@kksh/ui"
+	import { dev } from "$app/environment"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { toast } from "svelte-sonner"
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
+	import { valibot, valibotClient, zod, zodClient } from "sveltekit-superforms/adapters"
+	import * as v from "valibot"
+
+	const formSchema = v.object({
+		name: v.pipe(v.string(), v.minLength(1), v.maxLength(100)),
+		link: v.pipe(v.string(), v.minLength(5), v.maxLength(1000)),
+		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
+	})
+</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} />
+		<br />
+		<Form.Button>Submit</Form.Button>
+	</form>
+</div>
+{#if dev}
+	<div class="p-3">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}

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

apps/desktop/src/routes/extension/store/+page.svelte

@@ -76,7 +76,7 @@
 		<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..."

apps/desktop/src/routes/extension/store/[identifier]/+page.svelte

@@ -16,7 +16,6 @@
 	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) => {
@@ -117,20 +116,21 @@
 			.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) {
@@ -153,6 +153,7 @@
 	<ArrowLeftIcon />
 </Button>
 <StoreExtDetail
+	class="px-5"
 	{ext}
 	{manifest}
 	installedExt={$installedExt}

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/**/*"]
 }

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",

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(),

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({

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)
+}

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"

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"
-}
+}

packages/ui/package.json

@@ -35,19 +35,24 @@
 	},
 	"devDependencies": {
 		"@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",
+		"@iconify/svelte": "^4.0.2",
 		"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",

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}

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>

packages/ui/src/components/common/IconSelectorDialog.svelte

@@ -0,0 +1,77 @@
+<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>

packages/ui/src/components/common/index.ts

@@ -1 +1,2 @@
 export { default as IconMultiplexer } from "./IconMultiplexer.svelte"
+export { default as IconSelector } from "./IconSelector.svelte"

packages/ui/src/components/error/raw-error-json-preset.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import autoAnimate from "@formkit/auto-animate"
 	import Icon from "@iconify/svelte"
-	import { Button, buttonVariants, Collapsible, 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"
@@ -13,7 +13,7 @@
 		class: className,
 		rawJsonError,
 		onGoBack,
-		footer
+		footer: footer2
 	}: {
 		title: string
 		message: string
@@ -45,7 +45,7 @@
 		<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={buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}
+				class={ButtonModule.buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}
 			>
 				<ChevronsUpDown class="size-4" />
 			</Collapsible.Trigger>
@@ -58,8 +58,8 @@
 	</Collapsible.Root>
 	<br />
 	{#snippet footer()}
-		{#if footer}
-			{@render footer()}
+		{#if footer2}
+			{@render footer2()}
 		{:else}
 			<Button variant="default" class="w-full" onclick={onGoBack} disabled={enterDown}>
 				Go Back

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

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

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>

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,10 @@
 		onSelect={() => {
 			onExtCmdSelect(ext, cmd, { isDev, hmr })
 		}}
+		value={JSON.stringify({
+			cmdName: cmd.name,
+			cmdType: cmd.type
+		} satisfies CmdValue)}
 	>
 		<span class="flex gap-2">
 			<IconMultiplexer icon={cmd.icon ?? ext.kunkun.icon} class="!h-5 !w-5 shrink-0" />

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>

packages/ui/src/components/main/SystemCmds.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { IconEnum, SysCommand } from "@kksh/api/models"
+	import { CmdTypeEnum, IconEnum, SysCommand } from "@kksh/api/models"
 	import { Command } from "@kksh/svelte5"
 	import { IconMultiplexer } from "@kksh/ui"
-	import { DraggableCommandGroup } from "@kksh/ui/custom"
+	import { DraggableCommandGroup } from "../custom"
+	import { CmdValue } from "./types"
 
 	const { systemCommands }: { systemCommands: SysCommand[] } = $props()
 </script>
@@ -14,6 +15,10 @@
 			onSelect={() => {
 				cmd.function()
 			}}
+			value={JSON.stringify({
+				cmdName: cmd.name,
+				cmdType: CmdTypeEnum.System
+			} satisfies CmdValue)}
 		>
 			<span class="flex gap-2">
 				{#if cmd.icon}

packages/ui/src/components/main/index.ts

@@ -3,4 +3,5 @@ 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"

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 }

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>

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} />

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}
+/>

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>

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>

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>

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} />

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>

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)}
+/>

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
+}

packages/ui/src/components/ui/label/index.ts

@@ -0,0 +1,7 @@
+import Root from "./label.svelte"
+
+export {
+	Root,
+	//
+	Root as Label
+}

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}
+/>

packages/ui/src/index.ts

@@ -1,5 +1,5 @@
 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"
@@ -9,3 +9,5 @@ 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"

packages/ui/tsconfig.json

@@ -1,3 +1,4 @@
 {
-	"extends": "../typescript-config/base.json"
+	"extends": "../typescript-config/base.json",
+	"include": ["src/**/*"]
 }

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
@@ -434,6 +434,9 @@ importers:
       '@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
@@ -466,18 +469,27 @@ importers:
         specifier: ^3.12.5
         version: 3.12.5
     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)
@@ -496,6 +508,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
@@ -508,6 +523,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:
@@ -1279,12 +1297,12 @@ packages:
   '@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==}
@@ -2138,6 +2156,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==}
 
@@ -2647,6 +2671,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==}
 
@@ -3760,11 +3791,11 @@ packages:
       svelte:
         optional: true
 
-  svelte-persisted-store@0.11.0:
-    resolution: {integrity: sha512-9RgJ5DrawGyyfK22A80cfu8Jose3CV8YjEZKz9Tn94rQ0tWyEmYr+XI+wrVF6wjRbW99JMDSVcFRiM3XzVJj/w==}
+  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==}
@@ -5274,11 +5305,11 @@ snapshots:
 
   '@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':
@@ -6310,6 +6341,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
@@ -6897,6 +6938,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:
@@ -7918,7 +7965,7 @@ snapshots:
     optionalDependencies:
       svelte: 5.1.9
 
-  svelte-persisted-store@0.11.0(svelte@5.1.9):
+  svelte-persisted-store@0.12.0(svelte@5.1.9):
     dependencies:
       svelte: 5.1.9