UI updates/fixes (#244)

* fix: change icon in manifest

* refactor(ui): move BorderBeam component to ui package and update imports

* feat(ui): add new animation components and keyframes utility

* chore(deps): remove svelte-motion and related dependencies

* chore(deps): add svelte-motion and related dependencies

* fix(ui): eslint

* fix: extension store demo image display

* fix(ui): go to settings item in dropdown menu

* format

apps/desktop/src/lib/components/common/FullScreenLoading.svelte

@@ -2,9 +2,8 @@
 	import { appState } from "@/stores"
 	import { cn } from "@/utils"
 	import { Button } from "@kksh/svelte5"
-	import { Constants, Layouts, TauriLink } from "@kksh/ui"
+	import { BorderBeam, Constants, Layouts, TauriLink } from "@kksh/ui"
 	import { goto } from "$app/navigation"
-	import BorderBeam from "$lib/components/animations/BorderBeam.svelte"
 	import { ArrowLeftIcon, LoaderCircleIcon } from "lucide-svelte"
 	import Dance from "../dance/dance.svelte"
 

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

@@ -36,7 +36,13 @@
 	import { platform } from "@tauri-apps/plugin-os"
 	import { exit } from "@tauri-apps/plugin-process"
 	import { goto } from "$app/navigation"
-	import { ArrowBigUpIcon, CircleXIcon, EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-svelte"
+	import {
+		ArrowBigUpIcon,
+		CircleXIcon,
+		EllipsisVerticalIcon,
+		RefreshCcwIcon,
+		SettingsIcon
+	} from "lucide-svelte"
 	import { onMount } from "svelte"
 	import { Inspect } from "svelte-inspect-value"
 
@@ -178,8 +184,8 @@
 								<span class="flex items-center">⌃+<ArrowBigUpIcon class="h-4 w-4" />+R </span>
 							</DropdownMenu.Shortcut>
 						</DropdownMenu.Item>
-						<DropdownMenu.Item onclick={() => location.reload()}>
+						<DropdownMenu.Item onclick={() => goto(i18n.resolveRoute("/app/settings"))}>
-							<RefreshCcwIcon class="mr-2 h-4 w-4 text-green-500" />
+							<SettingsIcon class="mr-2 h-4 w-4 text-green-500" />
 							{m.home_command_input_dropdown_open_preference()}
 							<DropdownMenu.Shortcut>
 								{#if platform() === "macos"}

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

@@ -78,7 +78,9 @@
 	})
 
 	const demoImages = $derived(
-		extPublish.demo_images.map((src) => supabaseAPI.translateExtensionFilePathToUrl(src))
+		extPublish.demo_images.map((src) =>
+			src.startsWith("http") ? src : supabaseAPI.translateExtensionFilePathToUrl(src)
+		)
 	)
 
 	async function onInstallSelected() {

packages/api/src/models/manifest.ts

@@ -9,7 +9,7 @@ import {
 	ShellPermissionScopedSchema
 } from "../permissions"
 import { CmdType } from "./extension"
-import { Icon } from "./icon"
+import { BaseIcon as Icon } from "./icon"
 
 export enum OSPlatformEnum {
 	linux = "linux",

packages/svelte-animation/.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

packages/svelte-animation/index.ts

@@ -0,0 +1 @@
+export * as keyframes from "./src/keyframes"

packages/svelte-animation/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "@kksh/svelte-animation",
+	"module": "index.ts",
+	"type": "module",
+	"private": true,
+	"devDependencies": {
+		"@types/bun": "latest"
+	},
+	"peerDependencies": {
+		"typescript": "^5"
+	}
+}

packages/svelte-animation/src/keyframes.ts

@@ -0,0 +1,63 @@
+import type { Config } from "tailwindcss"
+
+export const shinePulse: NonNullable<NonNullable<Config["theme"]>["extend"]>["keyframes"] = {
+	"border-beam": {
+		"100%": {
+			"offset-distance": "100%"
+		}
+	},
+	"text-gradient": {
+		to: {
+			backgroundPosition: "200% center"
+		}
+	},
+	meteor: {
+		"0%": { transform: "rotate(215deg) translateX(0)", opacity: "1" },
+		"70%": { opacity: "1" },
+		"100%": {
+			transform: "rotate(215deg) translateX(-500px)",
+			opacity: "0"
+		}
+	},
+	grid: {
+		"0%": { transform: "translateY(-50%)" },
+		"100%": { transform: "translateY(0)" }
+	},
+	"aurora-border": {
+		"0%, 100%": { borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%" },
+		"25%": { borderRadius: "47% 29% 39% 49% / 61% 19% 66% 26%" },
+		"50%": { borderRadius: "57% 23% 47% 72% / 63% 17% 66% 33%" },
+		"75%": { borderRadius: "28% 49% 29% 100% / 93% 20% 64% 25%" }
+	},
+	"aurora-1": {
+		"0%, 100%": { top: "0", right: "0" },
+		"50%": { top: "50%", right: "25%" },
+		"75%": { top: "25%", right: "50%" }
+	},
+	"aurora-2": {
+		"0%, 100%": { top: "0", left: "0" },
+		"60%": { top: "75%", left: "25%" },
+		"85%": { top: "50%", left: "50%" }
+	},
+	"aurora-3": {
+		"0%, 100%": { bottom: "0", left: "0" },
+		"40%": { bottom: "50%", left: "25%" },
+		"65%": { bottom: "25%", left: "50%" }
+	},
+	"aurora-4": {
+		"0%, 100%": { bottom: "0", right: "0" },
+		"50%": { bottom: "25%", right: "40%" },
+		"90%": { bottom: "50%", right: "25%" }
+	},
+	"shine-pulse": {
+		"0%": {
+			"background-position": "0% 0%"
+		},
+		"50%": {
+			"background-position": "100% 100%"
+		},
+		to: {
+			"background-position": "0% 0%"
+		}
+	}
+}

packages/svelte-animation/src/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

packages/svelte-animation/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": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}

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

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

packages/ui/package.json

@@ -28,6 +28,10 @@
 		"./extension": {
 			"types": "./src/components/extension/index.ts",
 			"svelte": "./src/components/extension/index.ts"
+		},
+		"./animation": {
+			"types": "./src/components/animation/index.ts",
+			"svelte": "./src/components/animation/index.ts"
 		}
 	},
 	"scripts": {
@@ -83,6 +87,7 @@
 		"shiki-magic-move": "^0.5.2",
 		"svelte-inspect-value": "^0.3.0",
 		"svelte-markdown": "^0.4.1",
+		"svelte-motion": "^0.12.2",
 		"valibot": "1.0.0-beta.12"
 	}
 }

packages/ui/src/components/animation/AuroraText.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from "svelte"
+	import { cn } from "../../utils"
+
+	let { class: className, children }: { class?: string; children: Snippet } = $props()
+</script>
+
+<span class={cn("relative inline-flex overflow-hidden", className)}>
+	{@render children()}
+	<span class="pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken">
+		<span
+			class="pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]"
+		></span>
+		<span
+			class="pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]"
+		></span>
+		<span
+			class="pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]"
+		></span>
+		<span
+			class="pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]"
+		></span>
+	</span>
+</span>

packages/ui/src/components/animation/BorderBeam.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "$lib/utils"
+	import { cn } from "../../utils"
 
 	let {
 		class: className,

packages/ui/src/components/animation/MagicCard.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { onMount } from "svelte"
+	import { Motion, useMotionTemplate, useMotionValue } from "svelte-motion"
+	import { cn } from "../../utils"
+
+	export let gradientSize: number = 200
+	export let gradientColor: string = "#262626"
+	export let gradientOpacity: number = 0.8
+	let className: string = ""
+	export { className as class }
+
+	let gradSize = useMotionValue(gradientSize)
+	let gradColor = useMotionValue(gradientColor)
+	let mouseX = useMotionValue(-gradientSize)
+	let mouseY = useMotionValue(-gradientSize)
+
+	function handleMouseMove(e: MouseEvent) {
+		const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect()
+		mouseX.set(e.clientX - rect.left)
+		mouseY.set(e.clientY - rect.top)
+	}
+
+	function handleMouseLeave() {
+		mouseX.set(-gradientSize)
+		mouseY.set(-gradientSize)
+	}
+
+	onMount(() => {
+		mouseX.set(-gradientSize)
+		mouseY.set(-gradientSize)
+	})
+	let bg = useMotionTemplate`radial-gradient(${gradSize}px circle at ${mouseX}px ${mouseY}px, ${gradColor}, transparent 100%)`
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- I have added py-4 in below code, you can customize the component as per needs -->
+<div
+	on:mousemove={handleMouseMove}
+	on:mouseleave={handleMouseLeave}
+	class={cn(
+		"group relative flex size-full justify-center overflow-hidden rounded-xl border bg-neutral-100 py-4 text-black dark:bg-neutral-900 dark:text-white",
+		className
+	)}
+>
+	<div class="relative z-10">
+		<!-- Default  -->
+		<slot>
+			<div class="flex h-full items-center justify-center text-center">
+				<p class="text-2xl">Magic Card</p>
+			</div>
+		</slot>
+	</div>
+	<Motion
+		style={{
+			background: bg,
+			opacity: gradientOpacity
+		}}
+		let:motion
+	>
+		<div
+			use:motion
+			class="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+		></div>
+	</Motion>
+</div>
+
+<style>
+	.size-full {
+		width: 100%;
+		height: 100%;
+	}
+</style>

packages/ui/src/components/animation/RetroGrid.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn } from "../../utils"
+
+	let { class: className }: { class?: string } = $props()
+</script>
+
+<div
+	class={cn(
+		"pointer-events-none absolute h-full w-full overflow-hidden opacity-50 [perspective:200px]",
+		className
+	)}
+>
+	<!-- Grid  -->
+	<div class="absolute inset-0 [transform:rotateX(35deg)]">
+		<div
+			class={cn(
+				"animate-grid",
+
+				"[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]",
+
+				// Light Styles
+				"[background-image:linear-gradient(to_right,rgba(0,0,0,0.3)_1px,transparent_0),linear-gradient(to_bottom,rgba(0,0,0,0.3)_1px,transparent_0)]",
+
+				// Dark styles
+				"dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]"
+			)}
+		></div>
+	</div>
+
+	<!-- Background Gradient -->
+	<div
+		class="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black"
+	></div>
+</div>

packages/ui/src/components/animation/ShineBorder.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { cn } from "../../utils"
+
+	type TColorProp = string | string[]
+
+	export let borderRadius: number = 8
+	export let borderWidth: number = 1
+	export let duration: number = 14
+	export let color: TColorProp = ["#4FF9FF"]
+	let className: string = ""
+	export { className as class }
+</script>
+
+<div
+	style="
+        --border-radius: {borderRadius}px;
+      "
+	class={cn(
+		"relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[var(--border-radius)] bg-white p-3 text-black dark:bg-black dark:text-white",
+		className
+	)}
+>
+	<div
+		style="
+          --border-width: {borderWidth}px;
+          --border-radius: {borderRadius}px;
+          --shine-pulse-duration: {duration}s;
+          --mask-linear-gradient: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          --background-radial-gradient: radial-gradient(transparent, transparent, {Array.isArray(
+			color
+		)
+			? color.join(',')
+			: color}, transparent, transparent);
+        "
+		class="before:bg-shine-size before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[var(--border-radius)] before:p-[var(--border-width)] before:will-change-[background-position] before:content-[''] before:![-webkit-mask-composite:xor] before:[background-image:var(--background-radial-gradient)] before:[background-size:300%_300%] before:![mask-composite:exclude] before:[mask:var(--mask-linear-gradient)] motion-safe:before:animate-[shine-pulse_var(--shine-pulse-duration)_infinite_linear]"
+	></div>
+	<!-- This is Default Slot -->
+	<slot>Default</slot>
+</div>

packages/ui/src/components/animation/WordRotate.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { onMount } from "svelte"
+	import { fly } from "svelte/transition"
+	import { cn } from "../../utils"
+
+	export let words: string[] = ["Hello", "Svelte", "Coders"]
+	export let duration: number = 2100
+
+	let className: string = ""
+	export { className as class }
+
+	let index = 0
+	let chnageIndex = () => {
+		index = (index + 1) % words.length
+	}
+	onMount(() => {
+		let interval = setInterval(chnageIndex, duration)
+		return () => clearInterval(interval)
+	})
+	//  I tried with Svelte Motion but there was a slight delay in the animation
+	//  so I used the built-in svelte transition
+</script>
+
+<div class="overflow-hidden py-2">
+	{#key index}
+		<!-- Change In, Out Animation for Rotate Effects -->
+		<h1
+			in:fly={{ y: -50, delay: 200 }}
+			out:fly={{ y: 40, duration: 200 }}
+			class={cn(className, "text-center")}
+		>
+			{words[index]}
+		</h1>
+	{/key}
+</div>

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

@@ -0,0 +1,7 @@
+export { default as GridAnimation } from "./grid-animation.svelte"
+export { default as BorderBeam } from "./BorderBeam.svelte"
+export { default as Meteors } from "./meteros.svelte"
+export { default as RetroGrid } from "./RetroGrid.svelte"
+export { default as AuroraText } from "./AuroraText.svelte"
+export { default as WordRotate } from "./WordRotate.svelte"
+export { default as MagicCard } from "./MagicCard.svelte"

packages/ui/src/components/animation/meteros.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { onMount } from "svelte"
+	import { cn } from "../../utils"
+
+	export let number = 10
+	let meteorStyles: {
+		top: number
+		left: string
+		animationDelay: string
+		animationDuration: string
+	}[] = []
+	let changeMeteors = (num: number) => {
+		meteorStyles = []
+		const styles = [...new Array(num)].map(() => ({
+			top: -20,
+			left: Math.floor(Math.random() * 700) + "px",
+			animationDelay: Math.random() * 1 + 0.2 + "s",
+			animationDuration: Math.floor(Math.random() * 8 + 2.9) + "s"
+		}))
+		meteorStyles = styles
+	}
+	onMount(() => {
+		changeMeteors(number)
+	})
+	//   $: changeMeteors(number);
+</script>
+
+{#each meteorStyles as style, idx}
+	<span
+		id="meteor-{idx + 1}"
+		class={cn(
+			"animate-meteor pointer-events-none absolute left-1/2 top-1/2 size-[2.4px] rotate-[215deg] rounded-full bg-slate-500 shadow-[0_0_0_1px_#ffffff10]"
+		)}
+		style="top: {style.top}px; left: {style.left}; animation-delay: {style.animationDelay}; animation-duration: {style.animationDuration};"
+	>
+		<!-- Meteor Tail  -->
+		<div
+			class="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 via-blue-600/30 to-transparent"
+		></div>
+	</span>
+{/each}

packages/ui/src/index.ts

@@ -9,6 +9,10 @@ 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 { default as BorderBeam } from "./components/animation/BorderBeam.svelte"
+export { default as Meteors } from "./components/animation/meteros.svelte"
+export { default as RetroGrid } from "./components/animation/RetroGrid.svelte"
+export { default as AuroraText } from "./components/animation/AuroraText.svelte"
 export * as Constants from "./constants"
 export * as Form from "./components/ui/form"
 export { default as ModeToggle } from "./components/theme/mode-toggle.svelte"

pnpm-lock.yaml

@@ -335,7 +335,7 @@ importers:
         version: 8.25.0(eslint@9.21.0(jiti@2.4.0))(typescript@5.6.3)
       autoprefixer:
         specifier: ^10.4.20
-        version: 10.4.20(postcss@8.4.49)
+        version: 10.4.20(postcss@8.5.3)
       bits-ui:
         specifier: 1.0.0-next.86
         version: 1.0.0-next.86(svelte@5.20.5)
@@ -791,6 +791,16 @@ importers:
         specifier: latest
         version: 1.2.4
 
+  packages/svelte-animation:
+    dependencies:
+      typescript:
+        specifier: ^5
+        version: 5.7.3
+    devDependencies:
+      '@types/bun':
+        specifier: latest
+        version: 1.2.4
+
   packages/tauri-plugins/jarvis:
     dependencies:
       typescript:
@@ -1246,6 +1256,9 @@ importers:
       svelte-markdown:
         specifier: ^0.4.1
         version: 0.4.1(svelte@5.20.5)
+      svelte-motion:
+        specifier: ^0.12.2
+        version: 0.12.2(svelte@5.20.5)
       valibot:
         specifier: 1.0.0-beta.12
         version: 1.0.0-beta.12(typescript@5.7.3)
@@ -7835,6 +7848,9 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framesync@6.1.2:
+    resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==}
+
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -8121,6 +8137,9 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
+
   highlight.js@11.11.1:
     resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
     engines: {node: '>=12.0.0'}
@@ -9660,6 +9679,9 @@ packages:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
+  popmotion@11.0.5:
+    resolution: {integrity: sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==}
+
   portfinder@1.0.32:
     resolution: {integrity: sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==}
     engines: {node: '>= 0.12.0'}
@@ -10829,6 +10851,9 @@ packages:
   style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
 
+  style-value-types@5.1.2:
+    resolution: {integrity: sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==}
+
   styled-jsx@5.1.1:
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
@@ -10928,6 +10953,11 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
+  svelte-motion@0.12.2:
+    resolution: {integrity: sha512-7RrdRz9iVP55B9HT/C0hYW3pyrKlF61kAby/AkDtOAP0uHFQDrfd0qQetDC81cEsK9b40jt+jfcqSAXcA7LPEw==}
+    peerDependencies:
+      svelte: '>=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0'
+
   svelte-persisted-store@0.12.0:
     resolution: {integrity: sha512-BdBQr2SGSJ+rDWH8/aEV5GthBJDapVP0GP3fuUCA7TjYG5ctcB+O9Mj9ZC0+Jo1oJMfZUd1y9H68NFRR5MyIJA==}
     engines: {node: '>=0.14'}
@@ -18489,6 +18519,16 @@ snapshots:
       postcss: 8.5.1
       postcss-value-parser: 4.2.0
 
+  autoprefixer@10.4.20(postcss@8.5.3):
+    dependencies:
+      browserslist: 4.24.2
+      caniuse-lite: 1.0.30001676
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.3
+      postcss-value-parser: 4.2.0
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.0.0
@@ -20458,6 +20498,10 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framesync@6.1.2:
+    dependencies:
+      tslib: 2.4.0
+
   fresh@0.5.2: {}
 
   fs-extra@10.1.0:
@@ -20777,6 +20821,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  hey-listen@1.0.8: {}
+
   highlight.js@11.11.1: {}
 
   hookable@5.5.3: {}
@@ -22432,6 +22478,13 @@ snapshots:
 
   pluralize@8.0.0: {}
 
+  popmotion@11.0.5:
+    dependencies:
+      framesync: 6.1.2
+      hey-listen: 1.0.8
+      style-value-types: 5.1.2
+      tslib: 2.4.0
+
   portfinder@1.0.32:
     dependencies:
       async: 2.6.4
@@ -23653,6 +23706,11 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
+  style-value-types@5.1.2:
+    dependencies:
+      hey-listen: 1.0.8
+      tslib: 2.4.0
+
   styled-jsx@5.1.1(react@18.3.1):
     dependencies:
       client-only: 0.0.1
@@ -23769,6 +23827,15 @@ snapshots:
       marked: 5.1.2
       svelte: 5.20.5
 
+  svelte-motion@0.12.2(svelte@5.20.5):
+    dependencies:
+      '@types/react': 18.3.12
+      framesync: 6.1.2
+      popmotion: 11.0.5
+      style-value-types: 5.1.2
+      svelte: 5.20.5
+      tslib: 2.8.1
+
   svelte-persisted-store@0.12.0(svelte@5.16.6):
     dependencies:
       svelte: 5.16.6
@@ -24374,8 +24441,7 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tslib@2.4.0:
+  tslib@2.4.0: {}
-    optional: true
 
   tslib@2.8.1: {}