feat: implement pixel dance animation component, page and command (#8)

* feat: implement pixel dance animation component, page and command

* feat: make entire dance page draggable

* feat: add dance transition for ui-iframe extension loading

.prettierrc

@@ -1,20 +1,20 @@
 {
-  "printWidth": 100,
+	"printWidth": 100,
-  "tabWidth": 2,
+	"tabWidth": 2,
-  "trailingComma": "none",
+	"trailingComma": "none",
-  "semi": false,
+	"semi": false,
-  "useTabs": true,
+	"useTabs": true,
-  "plugins": [
+	"plugins": [
-    "prettier-plugin-svelte",
+		"prettier-plugin-svelte",
-    "@ianvs/prettier-plugin-sort-imports",
+		"@ianvs/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss"
+		"prettier-plugin-tailwindcss"
-  ],
+	],
-  "overrides": [
+	"overrides": [
-    {
+		{
-      "files": "*.svelte",
+			"files": "*.svelte",
-      "options": {
+			"options": {
-        "parser": "svelte"
+				"parser": "svelte"
-      }
+			}
-    }
+		}
-  ]
+	]
 }

apps/desktop/.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+dance.json
+dance.bin

apps/desktop/package.json

@@ -4,6 +4,7 @@
 	"description": "",
 	"type": "module",
 	"scripts": {
+		"prepare": "bun setup.ts",
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
@@ -22,6 +23,8 @@
 		"@tauri-apps/plugin-shell": "^2",
 		"bits-ui": "1.0.0-next.36",
 		"lucide-svelte": "^0.454.0",
+		"lz-string": "^1.5.0",
+		"mode-watcher": "^0.4.1",
 		"svelte-radix": "^2.0.1",
 		"svelte-sonner": "^0.3.28",
 		"sveltekit-superforms": "^2.20.0"
@@ -36,6 +39,7 @@
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"@tauri-apps/cli": "^2.0.4",
+		"@types/bun": "latest",
 		"autoprefixer": "^10.4.20",
 		"clsx": "^2.1.1",
 		"embla-carousel-svelte": "^8.3.1",

apps/desktop/setup.ts

@@ -0,0 +1,27 @@
+import assert from "assert"
+import { compressString, decompressString } from "@kksh/utils"
+import { $ } from "bun"
+
+/* -------------------------------------------------------------------------- */
+/*                             Download Dance JSON                            */
+/* -------------------------------------------------------------------------- */
+console.log("Downloading Dance Data...")
+const rawData = await fetch("https://dance.kunkun.sh/api/data").then((res) => res.text())
+
+function formatFileSize(size: number) {
+	return `${(size / 1024).toFixed(2)} KB`
+}
+Bun.write("./src/data/dance.json", rawData)
+console.log(`Raw Data Size: ${formatFileSize(rawData.length)}`)
+const compressedDance = compressString(rawData)
+const decompressedDance = decompressString(compressedDance)
+assert(decompressedDance === rawData)
+const filePath = "./src/data/dance.bin"
+
+Bun.write(
+	filePath, // has to be .txt in order to be imported as text
+	compressedDance
+)
+// get file size
+const fileSize = Bun.file(filePath).size
+console.log(`Dance Data Compressed File Size: ${formatFileSize(fileSize)}`)

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

@@ -74,7 +74,7 @@ export const builtinCmds: BuiltinCmd[] = [
 			appState.clearSearchTerm()
 			goto("/settings/set-dev-ext-path")
 		}
-	}
+	},
 	// {
 	// 	name: "Extension Window Troubleshooter",
 	// 	iconifyIcon: "material-symbols:window-outline",
@@ -167,14 +167,14 @@ export const builtinCmds: BuiltinCmd[] = [
 	// 		location.reload()
 	// 	}
 	// },
-	// {
+	{
-	// 	name: "Dance",
+		name: "Dance",
-	// 	iconifyIcon: "mdi:dance-pole",
+		iconifyIcon: "mdi:dance-pole",
-	// 	description: "Dance",
+		description: "Dance",
-	// 	function: async () => {
+		function: async () => {
-	// 		goto("/dance")
+			goto("/dance")
-	// 	}
+		}
-	// },
+	}
 	// {
 	// 	name: "Quit Kunkun",
 	// 	iconifyIcon: "emojione:cross-mark-button",

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

@@ -51,7 +51,11 @@ export async function onCustomUiCmdSelect(
 	} else {
 		console.log("Launch main window")
 		return winExtMap
-			.registerExtensionWithWindow({ windowLabel: "main", extPath: ext.extPath, dist: cmd.dist })
+			.registerExtensionWithWindow({
+				windowLabel: "main",
+				extPath: ext.extPath,
+				dist: cmd.dist
+			})
 			.then(() => goto(url2))
 	}
 }

apps/desktop/src/lib/components/context/AppContext.svelte

@@ -9,8 +9,11 @@
 		appConfig,
 		appState,
 		children
-	}: { appConfig: Writable<AppConfig>; appState: Writable<AppState>; children: Snippet<[]> } =
+	}: {
-		$props()
+		appConfig: Writable<AppConfig>
+		appState: Writable<AppState>
+		children: Snippet<[]>
+	} = $props()
 
 	setAppConfigContext(appConfig)
 	setAppStateContext(appState)

apps/desktop/src/lib/components/dance.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { GridAnimation } from "@kksh/ui"
+	import { decompressFrame, decompressString, deserializeFrame } from "@kksh/utils"
+	import compressedDance from "$lib/../data/dance.bin?raw"
+
+	const rawData = JSON.parse(decompressString(compressedDance))
+	const { fps, frames: rawFrames }: { fps: number; frames: string[] } = rawData
+	const decodedFrames = rawFrames.map((frame) => deserializeFrame(decompressFrame(frame)))
+
+	let { scale = 1 } = $props()
+</script>
+
+<GridAnimation
+	class="pointer-events-none max-h-full max-w-full select-none invert dark:invert-0"
+	{fps}
+	frames={decodedFrames}
+	{scale}
+/>

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

@@ -3,6 +3,7 @@
 passing everything through props will be very complicated and hard to maintain.
 -->
 <script lang="ts">
+	import { devStoreExts, installedStoreExts } from "@/stores"
 	import type { ExtPackageJsonExtra } from "@kksh/api/models"
 	import { isExtPathInDev } from "@kksh/extension/utils"
 	import { Command } from "@kksh/svelte5"
@@ -47,22 +48,18 @@ passing everything through props will be very complicated and hard to maintain.
 	<Command.List class="max-h-screen grow">
 		<Command.Empty data-tauri-drag-region>No results found.</Command.Empty>
 		<BuiltinCmds {builtinCmds} />
-		{#if $appConfig.extensionPath}
+		{#if $appConfig.extensionPath && $devStoreExts.length > 0}
 			<ExtCmdsGroup
-				extensions={extensions.filter((ext) =>
+				extensions={$devStoreExts}
-					isExtPathInDev($appConfig.extensionPath!, ext.extPath)
-				)}
 				heading="Dev Extensions"
 				isDev={true}
 				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
 				hmr={$appConfig.hmr}
 			/>
 		{/if}
-		{#if $appConfig.extensionPath}
+		{#if $appConfig.extensionPath && $installedStoreExts.length > 0}
 			<ExtCmdsGroup
-				extensions={extensions.filter(
+				extensions={$installedStoreExts}
-					(ext) => !isExtPathInDev($appConfig.extensionPath!, ext.extPath)
-				)}
 				heading="Extensions"
 				isDev={false}
 				hmr={false}

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

@@ -106,14 +106,6 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 
 export const extensions = createExtensionsStore()
 
-// export const devExtensions: Readable<ExtPackageJsonExtra[]> = derived(
-// 	extensions,
-// 	($extensionsStore, set) => {
-// 		getExtensionsFolder().then((extFolder) => {
-// 			set($extensionsStore.filter((ext) => !ext.extPath.startsWith(extFolder)))
-// 		})
-// 	}
-// )
 export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 	extensions,
 	($extensionsStore) => {
@@ -122,3 +114,11 @@ export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 		return $extensionsStore.filter((ext) => !extAPI.isExtPathInDev(extContainerPath, ext.extPath))
 	}
 )
+export const devStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
+	extensions,
+	($extensionsStore) => {
+		const extContainerPath = get(appConfig).extensionPath
+		if (!extContainerPath) return []
+		return $extensionsStore.filter((ext) => extAPI.isExtPathInDev(extContainerPath, ext.extPath))
+	}
+)

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { Button } from "@kksh/svelte5"
+	import { Layouts } from "@kksh/ui"
+	import Dance from "$lib/components/dance.svelte"
+	import ArrowLeft from "svelte-radix/ArrowLeft.svelte"
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button
+	variant="outline"
+	size="icon"
+	onclick={goBack}
+	class="absolute left-2 top-2"
+	data-tauri-drag-region
+>
+	<ArrowLeft class="size-4" />
+</Button>
+<Layouts.Center class="h-screen w-screen" data-tauri-drag-region>
+	<Dance />
+</Layouts.Center>

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

@@ -36,7 +36,9 @@
 	async function onExtItemUpgrade(ext: SBExt) {
 		const res = await supabaseAPI.getLatestExtPublish(ext.identifier)
 		if (res.error)
-			return toast.error("Fail to get latest extension", { description: res.error.message })
+			return toast.error("Fail to get latest extension", {
+				description: res.error.message
+			})
 		const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(res.data.tarball_path)
 		return extensions.upgradeStoreExtension(ext.identifier, tarballUrl).then((newExt) => {
 			toast.success(`${ext.name} Upgraded to ${newExt.version}`)
@@ -47,7 +49,9 @@
 		console.log("onExtItemInstall", ext)
 		const res = await supabaseAPI.getLatestExtPublish(ext.identifier)
 		if (res.error)
-			return toast.error("Fail to get latest extension", { description: res.error.message })
+			return toast.error("Fail to get latest extension", {
+				description: res.error.message
+			})
 
 		const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(res.data.tarball_path)
 		const installDir = await getExtensionsFolder()

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

@@ -35,5 +35,10 @@ export const load: PageLoad = async (): Promise<{
 	)
 	console.log(get(upgradableExpsMap))
 
-	return { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap }
+	return {
+		storeExtList,
+		installedStoreExts,
+		installedExtsMap,
+		upgradableExpsMap
+	}
 }

apps/desktop/src/routes/extension/ui-iframe/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Dance from "@/components/dance.svelte"
 	import { appConfig, winExtMap } from "@/stores"
 	import { goBackOnEscape } from "@/utils/key"
 	import { goHome } from "@/utils/route"
@@ -21,12 +22,16 @@
 	} from "@kksh/api/ui"
 	import { toast, type IUiIframeServer2 } from "@kksh/api/ui/iframe"
 	import { Button } from "@kksh/svelte5"
+	import { Layouts } from "@kksh/ui"
 	import { cn } from "@kksh/ui/utils"
+	import { error as svelteError } from "@sveltejs/kit"
 	import { getCurrentWindow } from "@tauri-apps/api/window"
 	import { goto } from "$app/navigation"
 	import { page } from "$app/stores"
 	import { ArrowLeftIcon, MoveIcon, RefreshCcwIcon, XIcon } from "lucide-svelte"
 	import { onDestroy, onMount } from "svelte"
+	import { fade } from "svelte/transition"
+	import Layout from "../../+layout.svelte"
 	import type { PageData } from "./$types"
 
 	let { data }: { data: PageData } = $props()
@@ -133,16 +138,26 @@
 		}
 	}
 
+	function onIframeLoaded() {
+		setTimeout(() => {
+			iframeRef.focus()
+			uiControl.iframeLoaded = true
+		}, 300)
+	}
+
 	onMount(() => {
 		appWin.show()
-		console.log("how", appWin.label)
-
-		console.log(iframeRef.contentWindow)
 		if (iframeRef?.contentWindow) {
 			exposeApiToWindow(iframeRef.contentWindow, serverAPI)
 		} else {
 			toast.warning("iframeRef.contentWindow not available")
 		}
+
+		setTimeout(() => {
+			if (!uiControl.iframeLoaded) {
+				toast.error("Extension failed to load")
+			}
+		}, 3_000)
 	})
 
 	onDestroy(() => {
@@ -150,7 +165,7 @@
 	})
 </script>
 
-<svelte:window on:keydown|preventDefault={goBackOnEscape} />
+<svelte:window on:keydown={goBackOnEscape} />
 
 {#if uiControl.backBtnPosition}
 	<Button
@@ -190,9 +205,17 @@
 {/if}
 
 <main class="h-screen">
+	{#if !uiControl.iframeLoaded}
+		<div class="bg-background absolute h-screen w-screen" out:fade>
+			<Layouts.Center class="h-full w-full" hidden={true}>
+				<Dance />
+			</Layouts.Center>
+		</div>
+	{/if}
 	<iframe
 		bind:this={iframeRef}
 		class="h-full"
+		onload={onIframeLoaded}
 		width="100%"
 		height="100%"
 		frameborder="0"

packages/api/src/commands/db.ts

@@ -63,7 +63,9 @@ export function getExtensionByIdentifierExpectExists(identifier: string): Promis
 // }
 
 export function deleteExtensionByPath(path: string) {
-	return invoke<void>(generateJarvisPluginCommand("delete_extension_by_path"), { path })
+	return invoke<void>(generateJarvisPluginCommand("delete_extension_by_path"), {
+		path
+	})
 }
 
 export function deleteExtensionByExtId(extId: string) {
@@ -97,7 +99,9 @@ export function getCommandsByExtId(extId: number) {
 }
 
 export function deleteCommandById(cmdId: number) {
-	return invoke<void>(generateJarvisPluginCommand("delete_command_by_id"), { cmdId })
+	return invoke<void>(generateJarvisPluginCommand("delete_command_by_id"), {
+		cmdId
+	})
 }
 
 export function updateCommandById(data: {
@@ -192,7 +196,10 @@ export async function searchExtensionData(searchParams: {
 			data: null | string
 			searchText: null | string
 		})[]
-	>(generateJarvisPluginCommand("search_extension_data"), { ...searchParams, fields })
+	>(generateJarvisPluginCommand("search_extension_data"), {
+		...searchParams,
+		fields
+	})
 
 	return items.map(convertRawExtDataToExtData).filter((item) => item) as ExtData[]
 }

packages/api/src/commands/extension.ts

@@ -3,7 +3,9 @@ import { ExtensionLabelMap } from "../models/extension"
 import { generateJarvisPluginCommand } from "./common"
 
 export function isWindowLabelRegistered(label: string): Promise<boolean> {
-	return invoke(generateJarvisPluginCommand("is_window_label_registered"), { label })
+	return invoke(generateJarvisPluginCommand("is_window_label_registered"), {
+		label
+	})
 }
 
 /**
@@ -25,7 +27,9 @@ export function registerExtensionWindow(options: {
 
 export function unregisterExtensionWindow(label: string): Promise<void> {
 	console.log("unregisterExtensionWindow", label)
-	return invoke(generateJarvisPluginCommand("unregister_extension_window"), { label })
+	return invoke(generateJarvisPluginCommand("unregister_extension_window"), {
+		label
+	})
 }
 
 export function registerExtensionSpawnedProcess(windowLabel: string, pid: number): Promise<void> {

packages/api/src/commands/utils.ts

@@ -2,5 +2,7 @@ import { invoke } from "@tauri-apps/api/core"
 import { generateJarvisPluginCommand } from "./common"
 
 export function plistToJson(plistContent: string) {
-	return invoke<any>(generateJarvisPluginCommand("plist_to_json"), { plistContent })
+	return invoke<any>(generateJarvisPluginCommand("plist_to_json"), {
+		plistContent
+	})
 }

packages/api/src/dev/index.ts

@@ -45,7 +45,9 @@ export async function refreshTemplateWorkerExtensionViaServer() {
 		console.warn("Will Refresh Every Instance")
 	}
 	for (const port of ports) {
-		fetch(`http://localhost:${port}/refresh-worker-extension`, { method: "POST" }).catch((err) => {
+		fetch(`http://localhost:${port}/refresh-worker-extension`, {
+			method: "POST"
+		}).catch((err) => {
 			console.error("Failed to send refresh worker extension request", err)
 		})
 	}

packages/api/src/permissions/permission-map.ts

@@ -24,16 +24,17 @@ export {
 	UpdownloadPermissionMap
 } from "tauri-api-adapter/permissions"
 
-export const SecurityPermissionMap: { mac: Record<keyof ISecurity["mac"], SecurityPermission[]> } =
+export const SecurityPermissionMap: {
-	{
+	mac: Record<keyof ISecurity["mac"], SecurityPermission[]>
-		mac: {
+} = {
-			revealSecurityPane: ["security:mac:all", "security:mac:reveal-security-pane"],
+	mac: {
-			verifyFingerprint: ["security:mac:all", "security:mac:verify-fingerprint"],
+		revealSecurityPane: ["security:mac:all", "security:mac:reveal-security-pane"],
-			requestScreenCapturePermission: ["security:mac:all", "security:mac:request-permission"],
+		verifyFingerprint: ["security:mac:all", "security:mac:verify-fingerprint"],
-			checkScreenCapturePermission: ["security:mac:all", "security:mac:check-permission"],
+		requestScreenCapturePermission: ["security:mac:all", "security:mac:request-permission"],
-			resetPermission: ["security:mac:all", "security:mac:reset-screencapture-permission"]
+		checkScreenCapturePermission: ["security:mac:all", "security:mac:check-permission"],
-		}
+		resetPermission: ["security:mac:all", "security:mac:reset-screencapture-permission"]
 	}
+}
 
 export const FsPermissionMap: Record<keyof IFs, KunkunFsPermission[]> = {
 	readDir: ["fs:read", "fs:read-dir"],

packages/api/src/ui/client.ts

@@ -158,7 +158,11 @@ export interface IUiIframe {
 	 */
 	showMoveButton: (position?: Position) => Promise<void>
 	showRefreshButton: (position?: Position) => Promise<void>
-	getTheme: () => Promise<{ theme: ThemeColor; radius: Radius; lightMode: LightMode }>
+	getTheme: () => Promise<{
+		theme: ThemeColor
+		radius: Radius
+		lightMode: LightMode
+	}>
 	reloadPage: () => Promise<void>
 	startDragging: () => Promise<void>
 	toggleMaximize: () => Promise<void>

packages/api/src/ui/worker/components/list-view.ts

@@ -81,7 +81,11 @@ export class Dropdown implements ListSchema.Dropdown, IComponent<ListSchema.Drop
 	sections: DropdownSection[]
 	defaultValue: string
 
-	constructor(model: IconConstructorPatch<ListSchema.Dropdown> & { sections: DropdownSection[] }) {
+	constructor(
+		model: IconConstructorPatch<ListSchema.Dropdown> & {
+			sections: DropdownSection[]
+		}
+	) {
 		this.tooltip = model.tooltip
 		this.sections = model.sections
 		this.defaultValue = model.defaultValue

packages/ci/scripts/setup.ts

@@ -1,6 +1,14 @@
+import fs from "fs"
 import path from "path"
 import { PACKAGES_PATHS } from "@/path"
 import { $ } from "bun"
 
 // Initialize .env files
 await $`bun ${path.join(PACKAGES_PATHS.CI, "scripts", "init-env.ts")}`
+
+/* -------------------------------------------------------------------------- */
+/*                             Download Dance JSON                            */
+/* -------------------------------------------------------------------------- */
+// const res = await fetch("https://dance.kunkun.sh/api/data")
+// const danceFilePath = path.join(PACKAGES_PATHS.DESKTOP, "./src/lib/dance.json")
+// Bun.write(danceFilePath, await res.text())

packages/ci/src/path.ts

@@ -4,6 +4,7 @@ import { fileURLToPath } from "url"
 const filepath = fileURLToPath(import.meta.url)
 export const REPO_ROOT = path.dirname(path.dirname(path.dirname(path.dirname(filepath))))
 export const PACKAGES_PATHS = {
+	DESKTOP: path.join(REPO_ROOT, "apps/desktop"),
 	CI: path.join(REPO_ROOT, "packages/ci"),
 	API: path.join(REPO_ROOT, "packages/api"),
 	SCHEMA: path.join(REPO_ROOT, "packages/schema"),

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/typescript-config/base.json

@@ -21,6 +21,8 @@
 		"paths": {
 			"@kksh/ui/*": ["./packages/ui/*"],
 			"@kksh/ui": ["./packages/ui"],
+			"@kksh/utils/*": ["./packages/utils/*"],
+			"@kksh/utils": ["./packages/utils"],
 			"@kksh/desktop/*": ["./apps/desktop/*"],
 			"@kksh/desktop": ["./apps/desktop"],
 			"@kksh/ci/*": ["./packages/ci/*"],

packages/ui/package.json

@@ -34,6 +34,7 @@
 		"lint": "eslint ."
 	},
 	"devDependencies": {
+		"@types/bun": "latest",
 		"@kksh/api": "workspace:*",
 		"bits-ui": "1.0.0-next.36",
 		"clsx": "^2.1.1",

packages/ui/src/components/animation/canvas-grid.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { onMount } from "svelte"
+
+	const { frame, class: className }: { frame: number[][]; class?: string } = $props()
+
+	let canvas: HTMLCanvasElement
+	let ctx: CanvasRenderingContext2D | null
+	const PIXEL_SIZE = 4 // Size of each pixel square
+
+	$effect(() => {
+		if (!canvas || !frame.length) return
+
+		const rows = frame.length
+		const cols = frame[0]?.length ?? 0
+
+		// Set canvas size
+		canvas.width = cols * PIXEL_SIZE
+		canvas.height = rows * PIXEL_SIZE
+
+		ctx = canvas.getContext("2d")
+		if (!ctx) return
+
+		// Clear canvas
+		ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+		// Draw pixels
+		for (let i = 0; i < rows; i++) {
+			for (let j = 0; j < cols; j++) {
+				const color = frame[i]?.[j] === 0 ? "black" : "white"
+				ctx.fillStyle = color
+				ctx.fillRect(j * PIXEL_SIZE, i * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE)
+			}
+		}
+	})
+</script>
+
+<canvas bind:this={canvas} class={className}></canvas>

packages/ui/src/components/animation/grid-animation.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { onMount } from "svelte"
+
+	let {
+		fps,
+		frames,
+		pixelColor = "white",
+		scale = 1,
+		canvas = $bindable<HTMLCanvasElement>(),
+		class: className
+	}: {
+		fps: number
+		frames: number[][][]
+		pixelColor?: string
+		scale?: number
+		canvas?: HTMLCanvasElement
+		class?: string
+	} = $props()
+
+	let ctx: CanvasRenderingContext2D | null
+	let frameIdx = $state(0)
+	let frameHeight = $derived(frames[0]?.length ?? 0)
+	let frameWidth = $derived(frames[0]?.[0]?.length ?? 0)
+	let nFrames = $derived(frames.length)
+	let frame = $derived(frames[frameIdx] ?? [])
+	const basePixelSize = 10
+	let pixelSize = $derived(basePixelSize * scale)
+	const frameInterval = $derived(1000 / fps)
+	let canvasWidth = $derived(frameWidth * pixelSize)
+	let canvasHeight = $derived(frameHeight * pixelSize)
+
+	function drawFrame() {
+		if (!canvas || !ctx) return
+		ctx.clearRect(0, 0, canvas.width, canvas.height)
+		for (let y = 0; y < frameHeight; y++) {
+			for (let x = 0; x < frameWidth; x++) {
+				ctx.fillStyle = frame[y]?.[x] === 1 ? pixelColor : "transparent"
+				ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize)
+			}
+		}
+		frameIdx = (frameIdx + 1) % nFrames
+	}
+
+	onMount(() => {
+		frameIdx = Math.floor(Math.random() * nFrames)
+		ctx = canvas.getContext("2d")
+		let lastTime = 0
+
+		function animate(time: number) {
+			if (time - lastTime >= frameInterval) {
+				drawFrame()
+				lastTime = time
+			}
+			requestAnimationFrame(animate)
+		}
+		requestAnimationFrame(animate)
+	})
+</script>
+
+<canvas bind:this={canvas} width={canvasWidth} height={canvasHeight} class={className}></canvas>

packages/ui/src/components/extension/PermissionInspector.svelte

@@ -21,7 +21,10 @@
 				<HoverCard.Trigger class="flex items-center">
 					<IconMultiplexer
 						class="border"
-						icon={{ type: IconEnum.Iconify, value: "material-symbols:info-outline" }}
+						icon={{
+							type: IconEnum.Iconify,
+							value: "material-symbols:info-outline"
+						}}
 					/>
 				</HoverCard.Trigger>
 				<HoverCard.Content class="max-h-96 w-96 overflow-x-auto overflow-y-auto">

packages/ui/src/components/layouts/center.svelte

@@ -2,9 +2,13 @@
 	import { cn } from "@kksh/ui/utils"
 	import { type Snippet } from "svelte"
 
-	const { children, class: className }: { children: Snippet; class?: string } = $props()
+	const {
+		children,
+		class: className,
+		...restProps
+	}: { children: Snippet; class?: string; [key: string]: any } = $props()
 </script>
 
-<div class={cn("flex items-center justify-center", className)}>
+<div class={cn("flex items-center justify-center", className)} {...restProps}>
 	{@render children?.()}
 </div>

packages/ui/src/index.ts

@@ -6,3 +6,4 @@ export * as Common from "./components/common/index"
 export * as Custom from "./components/custom"
 export * as Main from "./components/main/index"
 export * as Extension from "./components/extension/index"
+export { default as GridAnimation } from "./components/animation/grid-animation.svelte"

packages/utils/__tests__/compress.test.ts

@@ -0,0 +1,8 @@
+import { expect, test } from "bun:test"
+import { compress, decompress } from "lz-string"
+import { compressString, decompressString } from "../src"
+
+test("decompressString", async () => {
+	const data = await fetch("https://dance.kunkun.sh/api/data").then((res) => res.text())
+	expect(decompressString(compressString(data))).toBe(data)
+})

packages/utils/package.json

@@ -2,6 +2,9 @@
 	"name": "@kksh/utils",
 	"module": "index.ts",
 	"type": "module",
+	"scripts": {
+		"test": "bun test"
+	},
 	"exports": {
 		".": "./src/index.ts"
 	},
@@ -10,5 +13,8 @@
 	},
 	"peerDependencies": {
 		"typescript": "^5.0.0"
+	},
+	"dependencies": {
+		"lz-string": "^1.5.0"
 	}
 }

packages/utils/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./format"
 export * from "./time"
+export * from "./serde"

packages/utils/src/serde.ts

@@ -0,0 +1,33 @@
+import { compressToBase64, decompressFromBase64 } from "lz-string"
+
+/**
+ * This file contains the deserialization and compression functions I designed for the grid animation.
+ */
+
+export function deserializeFrame(frameStr: string): number[][] {
+	// Convert string to 2D array. "o" is 0, "l" is 255. Each line is separated by '\n'
+	return frameStr.split("\n").map((row) => Array.from(row).map((char) => (char === "o" ? 0 : 1)))
+}
+
+export function decompressFrame(compressedFrame: string): string {
+	// Each char can be "o" or "l". Compress consecutive same char to a number followed by the char.
+	let decompressed = []
+	let count = ""
+	for (let char of compressedFrame) {
+		if (!isNaN(parseInt(char))) {
+			count += char
+		} else {
+			if (count) {
+				decompressed.push(char.repeat(parseInt(count)))
+				count = ""
+			} else {
+				decompressed.push(char)
+			}
+		}
+	}
+	return decompressed.join("")
+}
+
+// this is simple re-export of lz-string, the purpose is to make it easy to swap to another compression algorithm later without changing other code
+export const compressString = compressToBase64
+export const decompressString = decompressFromBase64

packages/utils/tsconfig.json

@@ -1,27 +1,28 @@
 {
-  "compilerOptions": {
+	"extends": "../typescript-config/base.json",
-    // Enable latest features
+	"compilerOptions": {
-    "lib": ["ESNext", "DOM"],
+		// Enable latest features
-    "target": "ESNext",
+		"lib": ["ESNext", "DOM"],
-    "module": "ESNext",
+		"target": "ESNext",
-    "moduleDetection": "force",
+		"module": "ESNext",
-    "jsx": "react-jsx",
+		"moduleDetection": "force",
-    "allowJs": true,
+		"jsx": "react-jsx",
+		"allowJs": true,
 
-    // Bundler mode
+		// Bundler mode
-    "moduleResolution": "bundler",
+		"moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+		"allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
+		"verbatimModuleSyntax": true,
-    "noEmit": true,
+		"noEmit": true,
 
-    // Best practices
+		// Best practices
-    "strict": true,
+		"strict": true,
-    "skipLibCheck": true,
+		"skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
+		"noFallthroughCasesInSwitch": true,
 
-    // Some stricter flags (disabled by default)
+		// Some stricter flags (disabled by default)
-    "noUnusedLocals": false,
+		"noUnusedLocals": false,
-    "noUnusedParameters": false,
+		"noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
+		"noPropertyAccessFromIndexSignature": false
-  }
+	}
 }

pnpm-lock.yaml

@@ -141,6 +141,12 @@ importers:
       lucide-svelte:
         specifier: ^0.454.0
         version: 0.454.0(svelte@5.1.9)
+      lz-string:
+        specifier: ^1.5.0
+        version: 1.5.0
+      mode-watcher:
+        specifier: ^0.4.1
+        version: 0.4.1(svelte@5.1.9)
       svelte-radix:
         specifier: ^2.0.1
         version: 2.0.1(svelte@5.1.9)
@@ -178,6 +184,9 @@ importers:
       '@tauri-apps/cli':
         specifier: ^2.0.4
         version: 2.0.4
+      '@types/bun':
+        specifier: latest
+        version: 1.1.13
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
@@ -327,118 +336,6 @@ importers:
         specifier: ^5.0.0
         version: 5.5.4
 
-  packages/api2:
-    dependencies:
-      '@hk/comlink-stdio':
-        specifier: npm:comlink-stdio@^0.1.7
-        version: comlink-stdio@0.1.7(typescript@5.6.3)
-      '@huakunshen/comlink':
-        specifier: ^4.4.1
-        version: 4.4.1
-      '@tauri-apps/api':
-        specifier: ^2.0.3
-        version: 2.0.3
-      '@tauri-apps/cli':
-        specifier: ^2.0.4
-        version: 2.0.4
-      '@tauri-apps/plugin-deep-link':
-        specifier: ^2.0.0
-        version: 2.0.0
-      '@tauri-apps/plugin-dialog':
-        specifier: ^2.0.1
-        version: 2.0.1
-      '@tauri-apps/plugin-fs':
-        specifier: ^2.0.1
-        version: 2.0.1
-      '@tauri-apps/plugin-global-shortcut':
-        specifier: ^2.0.0
-        version: 2.0.0
-      '@tauri-apps/plugin-http':
-        specifier: ^2.0.1
-        version: 2.0.1
-      '@tauri-apps/plugin-log':
-        specifier: ^2.0.0
-        version: 2.0.0
-      '@tauri-apps/plugin-notification':
-        specifier: ^2.0.0
-        version: 2.0.0
-      '@tauri-apps/plugin-os':
-        specifier: ^2.0.0
-        version: 2.0.0
-      '@tauri-apps/plugin-process':
-        specifier: 2.0.0
-        version: 2.0.0
-      '@tauri-apps/plugin-shell':
-        specifier: ^2.0.1
-        version: 2.0.1
-      '@tauri-apps/plugin-store':
-        specifier: ^2.1.0
-        version: 2.1.0
-      '@tauri-apps/plugin-updater':
-        specifier: ^2.0.0
-        version: 2.0.0
-      '@tauri-apps/plugin-upload':
-        specifier: ^2.0.0
-        version: 2.0.0
-      comlink:
-        specifier: ^4.4.1
-        version: 4.4.1
-      lodash:
-        specifier: ^4.17.21
-        version: 4.17.21
-      minimatch:
-        specifier: ^10.0.1
-        version: 10.0.1
-      semver:
-        specifier: ^7.6.3
-        version: 7.6.3
-      svelte-sonner:
-        specifier: ^0.3.28
-        version: 0.3.28(svelte@5.1.9)
-      tauri-api-adapter:
-        specifier: 0.3.8
-        version: 0.3.8(tslib@2.8.1)(typescript@5.6.3)
-      tauri-plugin-network-api:
-        specifier: 2.0.4
-        version: 2.0.4(typescript@5.6.3)
-      tauri-plugin-shellx-api:
-        specifier: ^2.0.11
-        version: 2.0.11
-      tauri-plugin-system-info-api:
-        specifier: 2.0.8
-        version: 2.0.8(typescript@5.6.3)
-      valibot:
-        specifier: ^0.40.0
-        version: 0.40.0(typescript@5.6.3)
-    devDependencies:
-      '@types/bun':
-        specifier: latest
-        version: 1.1.13
-      '@types/lodash':
-        specifier: ^4.17.13
-        version: 4.17.13
-      '@types/madge':
-        specifier: ^5.0.3
-        version: 5.0.3
-      '@types/node':
-        specifier: ^22.8.7
-        version: 22.8.7
-      '@types/semver':
-        specifier: ^7.5.8
-        version: 7.5.8
-      fs-extra:
-        specifier: ^11.2.0
-        version: 11.2.0
-      madge:
-        specifier: ^8.0.0
-        version: 8.0.0(typescript@5.6.3)
-      typedoc:
-        specifier: ^0.26.11
-        version: 0.26.11(typescript@5.6.3)
-      typescript:
-        specifier: ^5.0.0
-        version: 5.6.3
-
   packages/ci:
     dependencies:
       typescript:
@@ -557,6 +454,9 @@ importers:
       '@kksh/api':
         specifier: workspace:*
         version: link:../api
+      '@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)
@@ -596,6 +496,9 @@ importers:
 
   packages/utils:
     dependencies:
+      lz-string:
+        specifier: ^1.5.0
+        version: 1.5.0
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -3067,6 +2970,10 @@ packages:
   lunr@2.3.9:
     resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   madge@8.0.0:
     resolution: {integrity: sha512-9sSsi3TBPhmkTCIpVQF0SPiChj1L7Rq9kU2KDG1o6v2XH9cCw086MopjVCD+vuoL5v8S77DTbVopTO8OUiQpIw==}
     engines: {node: '>=18'}
@@ -5410,15 +5317,6 @@ snapshots:
       rollup: 4.24.3
       tslib: 2.8.1
 
-  '@rollup/plugin-typescript@11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.6.3)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
-      resolve: 1.22.8
-      typescript: 5.6.3
-    optionalDependencies:
-      rollup: 4.24.3
-      tslib: 2.8.1
-
   '@rollup/pluginutils@5.1.3(rollup@4.24.3)':
     dependencies:
       '@types/estree': 1.0.6
@@ -6501,10 +6399,6 @@ snapshots:
     dependencies:
       typescript: 5.5.4
 
-  comlink-stdio@0.1.7(typescript@5.6.3):
-    dependencies:
-      typescript: 5.6.3
-
   comlink@4.4.1: {}
 
   comma-separated-tokens@2.0.3: {}
@@ -7302,6 +7196,8 @@ snapshots:
 
   lunr@2.3.9: {}
 
+  lz-string@1.5.0: {}
+
   madge@8.0.0(typescript@5.5.4):
     dependencies:
       chalk: 4.1.2
@@ -7321,25 +7217,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  madge@8.0.0(typescript@5.6.3):
-    dependencies:
-      chalk: 4.1.2
-      commander: 7.2.0
-      commondir: 1.0.1
-      debug: 4.3.7
-      dependency-tree: 11.0.1
-      ora: 5.4.1
-      pluralize: 8.0.0
-      pretty-ms: 7.0.1
-      rc: 1.2.8
-      stream-to-array: 2.3.0
-      ts-graphviz: 2.1.4
-      walkdir: 0.4.1
-    optionalDependencies:
-      typescript: 5.6.3
-    transitivePeerDependencies:
-      - supports-color
-
   magic-string@0.30.12:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -8157,33 +8034,6 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
-  tauri-api-adapter@0.3.8(tslib@2.8.1)(typescript@5.6.3):
-    dependencies:
-      '@huakunshen/comlink': 4.4.1
-      '@rollup/plugin-alias': 5.1.1(rollup@4.24.3)
-      '@rollup/plugin-typescript': 11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.6.3)
-      '@tauri-apps/api': 2.0.3
-      '@tauri-apps/plugin-dialog': 2.0.1
-      '@tauri-apps/plugin-fs': 2.0.1
-      '@tauri-apps/plugin-http': 2.0.1
-      '@tauri-apps/plugin-log': 2.0.0
-      '@tauri-apps/plugin-notification': 2.0.0
-      '@tauri-apps/plugin-os': 2.0.0
-      '@tauri-apps/plugin-shell': 2.0.1
-      '@tauri-apps/plugin-upload': 2.0.0
-      rimraf: 5.0.10
-      rollup: 4.24.3
-      shx: 0.3.4
-      tauri-plugin-clipboard-api: 2.1.11(typescript@5.6.3)
-      tauri-plugin-network-api: 2.0.4(typescript@5.6.3)
-      tauri-plugin-shellx-api: 2.0.11
-      tauri-plugin-system-info-api: 2.0.8(typescript@5.6.3)
-      tsc-alias: 1.8.10
-      typescript: 5.6.3
-      valibot: 0.40.0(typescript@5.6.3)
-    transitivePeerDependencies:
-      - tslib
-
   tauri-plugin-clipboard-api@2.1.11(typescript@5.5.4):
     dependencies:
       '@tauri-apps/api': 2.0.1
@@ -8191,13 +8041,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  tauri-plugin-clipboard-api@2.1.11(typescript@5.6.3):
-    dependencies:
-      '@tauri-apps/api': 2.0.1
-      valibot: 0.40.0(typescript@5.6.3)
-    transitivePeerDependencies:
-      - typescript
-
   tauri-plugin-network-api@2.0.4(typescript@5.5.4):
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -8205,13 +8048,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  tauri-plugin-network-api@2.0.4(typescript@5.6.3):
-    dependencies:
-      '@tauri-apps/api': 2.0.3
-      valibot: 0.40.0(typescript@5.6.3)
-    transitivePeerDependencies:
-      - typescript
-
   tauri-plugin-shellx-api@2.0.11:
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -8223,13 +8059,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  tauri-plugin-system-info-api@2.0.8(typescript@5.6.3):
-    dependencies:
-      '@tauri-apps/api': 2.0.3
-      valibot: 0.40.0(typescript@5.6.3)
-    transitivePeerDependencies:
-      - typescript
-
   term-size@2.2.1: {}
 
   terser@5.36.0:
@@ -8358,15 +8187,6 @@ snapshots:
       typescript: 5.5.4
       yaml: 2.6.0
 
-  typedoc@0.26.11(typescript@5.6.3):
-    dependencies:
-      lunr: 2.3.9
-      markdown-it: 14.1.0
-      minimatch: 9.0.5
-      shiki: 1.22.2
-      typescript: 5.6.3
-      yaml: 2.6.0
-
   typescript@5.5.4: {}
 
   typescript@5.6.3: {}
@@ -8427,10 +8247,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  valibot@0.40.0(typescript@5.6.3):
-    optionalDependencies:
-      typescript: 5.6.3
-
   valibot@0.41.0(typescript@5.6.3):
     optionalDependencies:
       typescript: 5.6.3