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

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>