Upgrade svelte templates to use @kksh/svelte5 (#29)

* chore: add workspace settings in root package.json

* update dependencies

* upgrade: @kksh/svelte to @kksh/svelte5 in two svelte tempaltes

* feat: add fallback for image multiplexer

* ci: remove bun.lockb from root to avoid cloudflare error

apps/cli/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "kksh",
 	"module": "dist/cli.js",
-	"version": "0.0.23",
+	"version": "0.0.24",
 	"type": "module",
 	"bin": {
 		"kksh": "./dist/cli.js",
@@ -13,16 +13,10 @@
 		"test": "cross-env NODE_ENV=test bun test --coverage"
 	},
 	"devDependencies": {
-		"@rollup/plugin-json": "^6.1.0",
-		"@rollup/plugin-replace": "^5.0.7",
-		"@rollup/plugin-terser": "^0.4.4",
-		"@rollup/plugin-typescript": "^11.1.6",
 		"@types/bun": "latest",
 		"@types/debug": "^4.1.12",
 		"@types/fs-extra": "^11.0.4",
-		"cross-env": "^7.0.3",
+		"cross-env": "^7.0.3"
-		"rollup": "^4.24.0",
-		"rollup-plugin-visualizer": "^5.12.0"
 	},
 	"peerDependencies": {
 		"typescript": "^5.0.0"
@@ -41,4 +35,4 @@
 	"files": [
 		"dist"
 	]
-}
+}

apps/create-kunkun/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "create-kunkun",
 	"type": "module",
-	"version": "0.1.33",
+	"version": "0.1.34",
 	"bin": {
 		"create-kunkun": "dist/index.mjs"
 	},
@@ -11,17 +11,9 @@
 		"test": "bun test --coverage"
 	},
 	"devDependencies": {
-		"@rollup/plugin-commonjs": "^26.0.1",
-		"@rollup/plugin-json": "^6.1.0",
-		"@rollup/plugin-node-resolve": "^15.2.3",
-		"@rollup/plugin-replace": "^5.0.7",
-		"@rollup/plugin-terser": "^0.4.4",
-		"@rollup/plugin-typescript": "^11.1.6",
 		"@types/bun": "latest",
 		"@types/fs-extra": "^11.0.4",
 		"get-folder-size": "^5.0.0",
-		"rollup": "^4.24.0",
-		"rollup-plugin-visualizer": "^5.12.0",
 		"tar": "^7.4.3",
 		"vitest": "^2.0.0"
 	},
@@ -29,7 +21,7 @@
 		"typescript": "^5.0.0"
 	},
 	"dependencies": {
-		"@inquirer/prompts": "^5.2.1",
+		"@inquirer/prompts": "^5.5.0",
 		"@kksh/api": "workspace:*",
 		"chalk": "^5.3.0",
 		"commander": "^12.1.0",
@@ -40,4 +32,4 @@
 	"files": [
 		"dist"
 	]
-}
+}

package.json

@@ -21,7 +21,7 @@
 		"turbo": "^2.3.0",
 		"typescript": "5.6.3"
 	},
-	"packageManager": "pnpm@9.12.3",
+	"packageManager": "pnpm@9.14.1",
 	"engines": {
 		"node": ">=22"
 	},
@@ -50,5 +50,14 @@
 		"tauri-plugin-system-info-api": "workspace:*",
 		"valibot": "^0.40.0",
 		"zod": "^3.23.8"
-	}
+	},
-}
+	"workspaces": [
+		"apps/*",
+		"packages/*",
+		"packages/extensions/*",
+		"packages/templates/*",
+		"packages/tauri-plugins/*",
+		"vendors/tauri-plugin-network",
+		"vendors/tauri-plugin-system-info"
+	]
+}

packages/tauri-plugins/jarvis/permissions/autogenerated/reference.md

@@ -1,3 +1,4 @@
+
 ## Permission Table
 
 <table>
@@ -6,6 +7,7 @@
 <th>Description</th>
 </tr>
 
+
 <tr>
 <td>
 

packages/templates/template-ext-svelte/package.json

@@ -40,23 +40,23 @@
 	},
 	"dependencies": {
 		"@kksh/api": "workspace:*",
-		"@kksh/svelte": "0.1.4",
+		"@kksh/svelte5": "0.1.10",
 		"clsx": "^2.1.1",
-		"lucide-svelte": "^0.416.0",
+		"lucide-svelte": "^0.460.1",
-		"tailwind-merge": "^2.4.0",
+		"tailwind-merge": "^2.5.4",
-		"tailwind-variants": "^0.2.1"
+		"tailwind-variants": "^0.3.0"
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.1",
 		"@tsconfig/svelte": "^5.0.4",
-		"svelte": "^5.0.3",
+		"svelte": "^5.2.7",
-		"svelte-check": "^4.0.5",
+		"svelte-check": "^4.0.9",
-		"tslib": "^2.8.0",
+		"tslib": "^2.8.1",
-		"typescript": "~5.6.2",
+		"typescript": "~5.6.3",
-		"vite": "^5.4.9",
+		"vite": "^5.4.11",
-		"autoprefixer": "^10.4.19",
+		"autoprefixer": "^10.4.20",
-		"postcss": "^8.4.38",
+		"postcss": "^8.4.49",
-		"tailwindcss": "^3.4.4"
+		"tailwindcss": "^3.4.15"
 	},
 	"files": [
 		"dist",

packages/templates/template-ext-svelte/src/App.svelte

@@ -3,12 +3,12 @@
 	import {
 		Button,
 		Command,
-		CommandFooter,
+		// CommandFooter,
 		ModeWatcher,
 		Separator,
 		ThemeWrapper,
 		updateTheme
-	} from "@kksh/svelte"
+	} from "@kksh/svelte5"
 	import ThemeCustomizer from "$lib/components/ThemeCustomizer.svelte"
 	import {
 		Calculator,
@@ -49,23 +49,22 @@
 			<Command.List>
 				<Command.Empty>No results found.</Command.Empty>
 				<Command.Group heading="Suggestions">
-					<Command.Item onSelect={(v) => console.log("selected:", v)}>
+					<Command.Item>
 						<Calendar class="mr-2 h-4 w-4" />
-
 						<span>Calendar</span>
 					</Command.Item>
-					<Command.Item onSelect={(v) => console.log("selected:", v)}>
+					<Command.Item>
 						<Smile class="mr-2 h-4 w-4" />
 						<span>Search Emoji</span>
 					</Command.Item>
-					<Command.Item onSelect={(v) => console.log("selected:", v)}>
+					<Command.Item>
 						<Calculator class="mr-2 h-4 w-4" />
 						<span>Calculator</span>
 					</Command.Item>
 				</Command.Group>
 				<Command.Separator />
 				<Command.Group heading="Settings">
-					<Command.Item onSelect={(v) => console.log("selected:", v)}>
+					<Command.Item>
 						<User class="mr-2 h-4 w-4" />
 						<span>Profile</span>
 						<Command.Shortcut>⌘P</Command.Shortcut>
@@ -75,7 +74,7 @@
 						<span>Billing</span>
 						<Command.Shortcut>⌘B</Command.Shortcut>
 					</Command.Item>
-					<Command.Item onSelect={(v) => console.log("selected:", v)}>
+					<Command.Item>
 						<Settings class="mr-2 h-4 w-4" />
 						<span>Settings</span>
 						<Command.Shortcut>⌘S</Command.Shortcut>
@@ -83,7 +82,7 @@
 				</Command.Group>
 			</Command.List>
 		</div>
-		<CommandFooter>
+		<div class="flex items-center justify-between">
 			<SettingsIcon class="ml-2 h-4 w-4" />
 			<div class="flex items-center space-x-2">
 				<Button variant="ghost" size="sm">
@@ -93,6 +92,6 @@
 				<Separator orientation="vertical" />
 				<ThemeCustomizer />
 			</div>
-		</CommandFooter>
+		</div>
 	</Command.Root>
 </ThemeWrapper>

packages/templates/template-ext-svelte/src/app.css

@@ -1,4 +1,4 @@
-@import url("@kksh/svelte/themes");
+@import url("@kksh/svelte5/themes");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

packages/templates/template-ext-svelte/src/lib/components/ThemeCustomizer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ui } from "@kksh/api/ui/iframe"
-	import { ThemeCustomizerButton, updateTheme, type ThemeConfig } from "@kksh/svelte"
+	import { ThemeCustomizerButton, updateTheme, type ThemeConfig } from "@kksh/svelte5"
 	import { onMount } from "svelte"
 
 	let config: ThemeConfig = {

packages/templates/template-ext-svelte/tailwind.config.ts

@@ -5,7 +5,7 @@ const config: Config = {
 	darkMode: ["class"],
 	content: [
 		"./src/**/*.{html,js,svelte,ts}",
-		"./node_modules/@kksh/svelte/dist/**/*.{html,js,svelte,ts}"
+		"./node_modules/@kksh/svelte5/dist/**/*.{html,js,svelte,ts}"
 	],
 	safelist: ["dark"],
 	theme: {

packages/templates/template-ext-sveltekit/package.json

@@ -46,35 +46,35 @@
 	},
 	"dependencies": {
 		"@kksh/api": "workspace:*",
-		"@kksh/svelte": "0.1.4",
+		"@kksh/svelte5": "0.1.10",
 		"clsx": "^2.1.1",
-		"lucide-svelte": "^0.416.0",
+		"lucide-svelte": "^0.460.1",
-		"mode-watcher": "^0.4.0",
+		"mode-watcher": "^0.5.0",
-		"tailwind-merge": "^2.4.0",
+		"tailwind-merge": "^2.5.4",
-		"tailwind-variants": "^0.2.1"
+		"tailwind-variants": "^0.3.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.8.1",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.1",
-		"svelte": "^5.0.0",
+		"svelte": "^5.2.7",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.0.9",
-		"typescript": "^5.0.0",
+		"typescript": "^5.6.3",
-		"vite": "^5.0.3",
+		"vite": "^5.4.11",
 		"@sveltejs/adapter-static": "^3.0.6",
-		"@tailwindcss/typography": "^0.5.13",
+		"@tailwindcss/typography": "^0.5.15",
-		"@types/eslint": "^9.6.0",
+		"@types/eslint": "^9.6.1",
-		"autoprefixer": "^10.4.19",
+		"autoprefixer": "^10.4.20",
-		"eslint": "^9.0.0",
+		"eslint": "^9.15.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
+		"eslint-plugin-svelte": "^2.46.0",
-		"globals": "^15.0.0",
+		"globals": "^15.12.0",
-		"postcss": "^8.4.38",
+		"postcss": "^8.4.49",
-		"prettier": "^3.1.1",
+		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-svelte": "^3.2.8",
-		"prettier-plugin-tailwindcss": "^0.6.4",
+		"prettier-plugin-tailwindcss": "^0.6.9",
-		"tailwindcss": "^3.4.4",
+		"tailwindcss": "^3.4.15",
-		"typescript-eslint": "^8.0.0-alpha.20"
+		"typescript-eslint": "^8.15.0"
 	},
 	"type": "module",
 	"files": [

packages/templates/template-ext-sveltekit/src/app.css

@@ -1,4 +1,4 @@
-@import url("@kksh/svelte/themes");
+@import url("@kksh/svelte5/themes");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

packages/templates/template-ext-sveltekit/src/lib/components/ThemeCustomizer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ThemeCustomizerButton, type ThemeConfig, updateTheme } from '@kksh/svelte';
+	import { ThemeCustomizerButton, type ThemeConfig, updateTheme } from '@kksh/svelte5';
 	import { ui } from '@kksh/api/ui/iframe';
 	import { onMount } from 'svelte';
 

packages/templates/template-ext-sveltekit/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script>
 	import '../app.css';
 	import { ModeWatcher } from 'mode-watcher';
-	import { ThemeWrapper, updateTheme } from '@kksh/svelte';
+	import { ThemeWrapper, updateTheme } from '@kksh/svelte5';
 	import { onMount } from 'svelte';
 	import { ui } from '@kksh/api/ui/iframe';
 

packages/templates/template-ext-sveltekit/src/routes/+page.svelte

@@ -5,12 +5,11 @@
 		ModeToggle,
 		Button,
 		Command,
-		CommandFooter,
 		ModeWatcher,
 		Separator,
 		ThemeWrapper,
 		updateTheme
-	} from '@kksh/svelte';
+	} from '@kksh/svelte5';
 	import ThemeCustomizer from '$lib/components/ThemeCustomizer.svelte';
 	import {
 		Calculator,
@@ -44,23 +43,23 @@
 			<Command.List>
 				<Command.Empty>No results found.</Command.Empty>
 				<Command.Group heading="Suggestions">
-					<Command.Item onSelect={(v) => console.log('selected:', v)}>
+					<Command.Item>
 						<Calendar class="mr-2 h-4 w-4" />
 
 						<span>Calendar</span>
 					</Command.Item>
-					<Command.Item onSelect={(v) => console.log('selected:', v)}>
+					<Command.Item>
 						<Smile class="mr-2 h-4 w-4" />
 						<span>Search Emoji</span>
 					</Command.Item>
-					<Command.Item onSelect={(v) => console.log('selected:', v)}>
+					<Command.Item>
 						<Calculator class="mr-2 h-4 w-4" />
 						<span>Calculator</span>
 					</Command.Item>
 				</Command.Group>
 				<Command.Separator />
 				<Command.Group heading="Settings">
-					<Command.Item onSelect={(v) => console.log('selected:', v)}>
+					<Command.Item>
 						<User class="mr-2 h-4 w-4" />
 						<span>Profile</span>
 						<Command.Shortcut>⌘P</Command.Shortcut>
@@ -70,7 +69,7 @@
 						<span>Billing</span>
 						<Command.Shortcut>⌘B</Command.Shortcut>
 					</Command.Item>
-					<Command.Item onSelect={(v) => console.log('selected:', v)}>
+					<Command.Item>
 						<Settings class="mr-2 h-4 w-4" />
 						<span>Settings</span>
 						<Command.Shortcut>⌘S</Command.Shortcut>
@@ -78,7 +77,7 @@
 				</Command.Group>
 			</Command.List>
 		</div>
-		<CommandFooter>
+		<div class="flex items-center justify-between">
 			<SettingsIcon class="ml-2 h-4 w-4" />
 			<div class="flex items-center space-x-2">
 				<Button variant="ghost" size="sm">
@@ -88,7 +87,7 @@
 				<Separator orientation="vertical" />
 				<a href="{base}/about"><Button>About Page</Button></a>
 				<Button
-					on:click={async () => {
+					onclick={async () => {
 						toast.success(await clipboard.readText());
 					}}
 				>
@@ -97,6 +96,6 @@
 				<ModeToggle />
 				<ThemeCustomizer />
 			</div>
-		</CommandFooter>
+		</div>
 	</Command.Root>
 </ThemeWrapper>

packages/templates/template-ext-sveltekit/src/routes/about/+page.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { base } from '$app/paths';
-	import { Alert, Button, ThemeWrapper } from '@kksh/svelte';
+	import { Alert, Button, ThemeWrapper } from '@kksh/svelte5';
 </script>
 
 <ThemeWrapper>

packages/templates/template-ext-sveltekit/tailwind.config.ts

@@ -5,7 +5,7 @@ const config: Config = {
 	darkMode: ['class'],
 	content: [
 		'./src/**/*.{html,js,svelte,ts}',
-		'node_modules/@kksh/svelte/dist/**/*.{html,js,svelte,ts}'
+		'node_modules/@kksh/svelte5/dist/**/*.{html,js,svelte,ts}'
 	],
 	safelist: ['dark'],
 	theme: {

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

@@ -9,16 +9,29 @@
 		class: className,
 		...restProps
 	}: { icon: TIcon; class?: string; [key: string]: any } = $props()
+
+	let remoteIconError = $state(false)
 </script>
 
 {#if icon.type === IconEnum.RemoteUrl}
-	<img
+	{#if !remoteIconError}
-		loading="lazy"
+		<img
-		class={cn("", className, { invert: icon.invert })}
+			loading="lazy"
-		src={icon.value}
+			class={cn("", className, { invert: icon.invert })}
-		alt=""
+			src={icon.value}
-		{...restProps}
+			alt=""
-	/>
+			onerror={() => {
+				remoteIconError = true
+			}}
+			{...restProps}
+		/>
+	{:else}
+		<Icon
+			icon="carbon:unknown-filled"
+			class={cn("", className, { invert: icon.invert })}
+			{...restProps}
+		/>
+	{/if}
 {:else if icon.type === IconEnum.Iconify}
 	<Icon icon={icon.value} class={cn("", className, { invert: icon.invert })} {...restProps} />
 {:else if icon.type === IconEnum.Base64PNG}

packages/ui/src/components/extension/templates/list-item.svelte

@@ -3,7 +3,7 @@
 	import { Command } from "@kksh/svelte5"
 	import { IconMultiplexer } from "../../common"
 
-	let { item, onSelect }: { item: ListSchema.Item; onSelect?: () => void } = $props()
+	const { item, onSelect }: { item: ListSchema.Item; onSelect?: () => void } = $props()
 </script>
 
 <Command.Item class="gap-2" {onSelect} value={JSON.stringify(item)}>

packages/ui/src/components/extension/templates/list-view.svelte

@@ -7,6 +7,7 @@
 	import { type PaneAPI } from "paneforge"
 	import { onMount, type Snippet } from "svelte"
 	import { StrikeSeparator } from "../../common"
+	import { DraggableCommandGroup } from "../../custom"
 	import ListDetail from "./list-detail.svelte"
 	import ListItem from "./list-item.svelte"
 
@@ -58,6 +59,10 @@
 		highlightedValue = value
 	}
 
+	$effect(() => {
+		console.log("onListItemSelected", onListItemSelected)
+	})
+
 	$effect(() => {
 		if (highlightedValue.startsWith("{")) {
 			onHighlightedItemChanged?.(JSON.parse(highlightedValue).value)
@@ -138,19 +143,14 @@
 			<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}>
+					<DraggableCommandGroup heading={section.title}>
 						{#each section.items as item}
-							<ListItem {item} />
+							<ListItem {item} onSelect={() => onListItemSelected?.(item.value)} />
 						{/each}
-					</Command.Group>
+					</DraggableCommandGroup>
 				{/each}
 				{#each listViewContent.items || [] as item}
-					<ListItem
+					<ListItem {item} onSelect={() => onListItemSelected?.(item.value)} />
-						{item}
-						onSelect={() => {
-							onListItemSelected?.(item.value)
-						}}
-					/>
 				{/each}
 				{#if loading}
 					<StrikeSeparator class="h-20">

pnpm-workspace.yaml

@@ -6,6 +6,4 @@ packages:
   - "packages/tauri-plugins/*"
   - "vendors/tauri-plugin-network"
   - "vendors/tauri-plugin-system-info"
-  - "vendors/kkrpc/packages/kkrpc"
-  - "vendors/tauri-api-adapter/packages/tauri-api-adapter"