init

.github/workflows/npm-publish.yml

@@ -0,0 +1,48 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: NPM Package Publish
+
+on:
+  push:
+    branches: [main]
+  release:
+    types: [created]
+  workflow_dispatch:
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org/
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - uses: oven-sh/setup-bun@v2
+      - run: pnpm install
+      - run: pnpm build
+      - run: |
+          PACKAGE_NAME=$(jq -r '.name' package.json)
+          PACKAGE_VERSION=$(jq -r '.version' package.json)
+
+          # Get the version from npm registry
+          REGISTRY_VERSION=$(npm show "$PACKAGE_NAME" version)
+
+          # Compare versions
+          if [ "$PACKAGE_VERSION" == "$REGISTRY_VERSION" ]; then
+            echo "Version $PACKAGE_VERSION already exists in the npm registry."
+            exit 0
+          else
+            echo "Version $PACKAGE_VERSION does not exist in the npm registry. Proceeding..."
+            npm publish --provenance --access public
+          fi
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1,25 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+extensions_support/
+
+.pnpm-store
+dist/

.npmrc

@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io

README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "new-york",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/app.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}

deno-src/deno.json

@@ -0,0 +1,8 @@
+{
+	"tasks": {
+		"dev": "deno run --watch main.ts"
+	},
+	"imports": {
+		"@kunkun/api": "jsr:@kunkun/api@^0.0.52"
+	}
+}

deno-src/deno.lock

@@ -0,0 +1,45 @@
+{
+  "version": "4",
+  "specifiers": {
+    "jsr:@kunkun/api@^0.0.39": "0.0.39",
+    "npm:@types/node@*": "22.5.4",
+    "npm:kkrpc@^0.0.10": "0.0.10_typescript@5.6.3"
+  },
+  "jsr": {
+    "@kunkun/api@0.0.39": {
+      "integrity": "af1f0728083a6553279a4a7ce12ca83a6affe7dcda09b041376934e6c26e979e",
+      "dependencies": [
+        "npm:kkrpc"
+      ]
+    }
+  },
+  "npm": {
+    "@types/node@22.5.4": {
+      "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
+      "dependencies": [
+        "undici-types"
+      ]
+    },
+    "kkrpc@0.0.10_typescript@5.6.3": {
+      "integrity": "sha512-lkQKVnN9f6JrS4ybKbGkV4mtuGhWYLTnaWx60ysytEap+sP5jcTbAuJlSrY6JqlwaohiS0X3ZbvJ2rAXYRdTng==",
+      "dependencies": [
+        "typescript",
+        "ws"
+      ]
+    },
+    "typescript@5.6.3": {
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw=="
+    },
+    "undici-types@6.19.8": {
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
+    },
+    "ws@8.18.0": {
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw=="
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@kunkun/api@^0.0.39"
+    ]
+  }
+}

deno-src/lib.ts

@@ -0,0 +1,89 @@
+import { expose } from "@kunkun/api/runtime/deno"
+import { API, Progress } from "../src/types.ts"
+
+const oneMB = 1024 * 1024
+
+export async function sequentialWriteTest(
+	options: {
+		filePath: string
+		sizeInMB: number
+		rounds: number
+		bufferSizeMB: number
+		keepTheFile?: boolean
+	},
+	callback?: (progress: Progress) => void
+): Promise<Progress> {
+	const { filePath, sizeInMB, rounds, bufferSizeMB } = options
+	const data = new Uint8Array(bufferSizeMB * oneMB) // 1MB buffer
+	let start = performance.now()
+	let totalMB = 0
+	let totalDuration = 0
+	for (let round = 0; round < rounds; round++) {
+		const file = await Deno.open(filePath, { write: true, create: true })
+		const writer = file.writable.getWriter()
+
+		start = performance.now()
+		for (let i = 0; i < Math.floor(sizeInMB / bufferSizeMB); i++) {
+			await writer.write(data)
+			totalMB += bufferSizeMB
+		}
+		const roundEnd = performance.now()
+		totalDuration += (roundEnd - start) / 1000
+		callback?.({ totalMB, totalDuration })
+		await writer.close()
+		// if keepTheFile, do not remove the file in the last round
+		const isLastRound = round === rounds - 1
+		if (!isLastRound && !options.keepTheFile) {
+			Deno.removeSync(filePath)
+		}
+	}
+
+	return { totalDuration, totalMB }
+}
+
+export async function createEmptyFile(filePath: string, sizeInMB: number): Promise<void> {
+	if (await fileExists(filePath)) {
+		await Deno.remove(filePath)
+	}
+	const file = await Deno.open(filePath, { write: true, create: true })
+	const writer = file.writable.getWriter()
+	for (let i = 0; i < sizeInMB; i++) {
+		await writer.write(new Uint8Array(oneMB))
+	}
+	await writer.close()
+}
+
+// Sequential Read
+export async function sequentialReadTest(
+	filePath: string,
+	options: { deleteAfter: boolean } = { deleteAfter: true }
+): Promise<Progress> {
+	const file = await Deno.open(filePath, { read: true })
+	const buffer = new Uint8Array(oneMB) // 1MB buffer
+	const start = performance.now()
+	let totalMB = 0
+	while ((await file.read(buffer)) !== null) {
+		totalMB += 1
+	}
+	const totalDuration = (performance.now() - start) / 1000
+	file.close()
+	if (options.deleteAfter) {
+		Deno.removeSync(filePath)
+	}
+	return { totalMB, totalDuration }
+}
+
+export function fileExists(filePath: string): boolean {
+	try {
+		Deno.statSync(filePath)
+		return true
+	} catch (_error) {
+		return false
+	}
+}
+
+expose({
+	sequentialWriteTest,
+	sequentialReadTest,
+	createEmptyFile
+} satisfies API)

deno-src/random.ts

@@ -0,0 +1,97 @@
+import { parseArgs } from "jsr:@std/cli/parse-args"
+import { DiskSpeedTestInput, DiskSpeedTestOutput } from "../src/model.ts"
+
+const args = parseArgs(Deno.args)
+
+if (args._.length !== 1) {
+	console.error("Missing Arguments")
+	Deno.exit(1)
+}
+const encodedArgs = args._[0]
+const base64Decoded = atob(encodedArgs as string)
+
+const decodedJsonArgs: DiskSpeedTestInput = JSON.parse(base64Decoded)
+
+// Pre-fill file with zeros to a given size (in MB)
+async function initializeFile(filePath: string, sizeInMB: number) {
+	const file = await Deno.open(filePath, { write: true, create: true })
+	const data = new Uint8Array(1024 * 1024) // 1MB buffer filled with zeros
+	const start = performance.now()
+	const writer = file.writable.getWriter()
+	for (let i = 0; i < sizeInMB; i++) {
+		await writer.write(data)
+	}
+
+	file.close()
+	return (performance.now() - start) / 1000
+	// console.log(`File Initialization: ${sizeInMB}MB took ${duration.toFixed(3)} seconds`)
+}
+
+// Random Write
+async function randomWrite(filePath: string, iterations: number, blockSize: number) {
+	const file = await Deno.open(filePath, { write: true, create: true })
+	const fileSize = (await Deno.stat(filePath)).size
+	const data = new Uint8Array(blockSize)
+	const start = performance.now()
+	const writer = file.writable.getWriter()
+	const totalDataMB = (iterations * blockSize) / (1024 * 1024) // Total data in MB
+
+	for (let i = 0; i < iterations; i++) {
+		const offset = Math.floor(Math.random() * (fileSize - blockSize))
+		await file.seek(offset, Deno.SeekMode.Start)
+		await writer.write(data)
+	}
+
+	file.close()
+	const duration = (performance.now() - start) / 1000
+	return totalDataMB / duration
+
+	// const speed = totalDataMB / duration // Speed in MB/s
+	// console.log(
+	// 	`Random Write: ${iterations} iterations (${totalDataMB.toFixed(
+	// 		3
+	// 	)}MB) took ${duration.toFixed(3)} seconds`
+	// )
+	// console.log(`Write Speed: ${speed.toFixed(3)} MB/s`)
+}
+
+// Random Read
+async function randomRead(filePath: string, iterations: number, blockSize: number) {
+	const file = await Deno.open(filePath, { read: true })
+	const fileSize = (await Deno.stat(filePath)).size
+	const buffer = new Uint8Array(blockSize)
+	const start = performance.now()
+	const totalDataMB = (iterations * blockSize) / (1024 * 1024) // Total data in MB
+
+	for (let i = 0; i < iterations; i++) {
+		const offset = Math.floor(Math.random() * (fileSize - blockSize))
+		await file.seek(offset, Deno.SeekMode.Start)
+		await file.read(buffer)
+	}
+
+	file.close()
+	const duration = (performance.now() - start) / 1000
+	const speed = totalDataMB / duration
+	return speed
+	// console.log(
+	// 	`Random Read: ${iterations} iterations (${totalDataMB.toFixed(
+	// 		3
+	// 	)}MB) took ${duration.toFixed(3)} seconds`
+	// )
+	// console.log(`Read Speed: ${speed.toFixed(3)} MB/s`)
+}
+
+// Example Usage
+await initializeFile("./testfile.dat", 1000) // Pre-fill the file with 100MB of data
+const writeSpeed = await randomWrite("./testfile.dat", 10000, 4096) // Perform 1000 random writes (4KB blocks)
+const readSpeed = await randomRead("./testfile.dat", 10000, 4096) // Perform 1000 random reads (4KB blocks)
+
+const output: DiskSpeedTestOutput = {
+	writeSpeedMBps: writeSpeed,
+	readSpeedMBps: readSpeed
+}
+
+console.log(JSON.stringify(output))
+
+// remove the file
+await Deno.remove("./testfile.dat")

deno.json

@@ -0,0 +1,9 @@
+{
+  "tasks": {
+    "dev": "deno run --watch main.ts"
+  },
+  "imports": {
+    "@std/assert": "jsr:@std/assert@1",
+    "@valibot/valibot": "jsr:@valibot/valibot@^0.42.1"
+  }
+}

dev.ts

@@ -0,0 +1,31 @@
+import { $ } from "bun"
+import { DiskSpeedTestInput } from "./src/model.ts"
+
+const input: DiskSpeedTestInput = {
+	targetPath: "./testfile.dat",
+	sequential: {
+		stressFileSizeMB: 2000
+	},
+	random: {
+		stressFileSizeMB: 1000,
+		iterations: 1000,
+		blockSize: 4096
+	}
+}
+const encoded = btoa(JSON.stringify(input))
+// sequential
+;(async () => {
+	const res =
+		await $`deno run --allow-read --allow-write deno-scripts/sequential.ts ${encoded}`.quiet()
+	const stdoutSplit = res.stdout.toString("utf-8").split("\n")
+	console.log(JSON.parse(stdoutSplit[stdoutSplit.length - 2]))
+})()
+
+// random
+;(async () => {
+	const res = await $`deno run --allow-read --allow-write deno-scripts/random.ts ${encoded}`.quiet()
+	console.log("stdout", res.stdout.toString("utf-8"))
+
+	const stdoutSplit = res.stdout.toString("utf-8").split("\n")
+	console.log(JSON.parse(stdoutSplit[stdoutSplit.length - 2]))
+})()

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "https://schema.kunkun.sh",
+  "name": "kunkun-ext-disk-speed",
+  "license": "MIT",
+  "repository": "https://github.com/kunkunsh/kunkun-ext-disk-speed",
+  "version": "0.0.3",
+  "type": "module",
+  "kunkun": {
+    "name": "Disk Speed",
+    "shortDescription": "Test the speed of your disk",
+    "longDescription": "Test the speed of your disk",
+    "identifier": "disk-speed",
+    "icon": {
+      "type": "iconify",
+      "value": "carbon:meter"
+    },
+    "demoImages": [],
+    "permissions": [
+      "dialog:all",
+      {
+        "permission": "open:folder",
+        "allow": [
+          {
+            "path": "**"
+          }
+        ]
+      },
+      {
+        "permission": "shell:deno:spawn",
+        "allow": [
+          {
+            "path": "$EXTENSION/deno-src/lib.ts",
+            "read": "*",
+            "write": "*"
+          }
+        ]
+      },
+      "shell:stdin-write",
+      "shell:kill"
+    ],
+    "customUiCmds": [
+      {
+        "main": "/",
+        "dist": "dist",
+        "devMain": "http://localhost:5173",
+        "name": "Disk Speed",
+        "window": {
+          "hiddenTitle": true,
+          "titleBarStyle": "overlay"
+        },
+        "cmds": []
+      }
+    ],
+    "templateUiCmds": []
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+  },
+  "dependencies": {
+    "@iconify/svelte": "^4.0.2",
+    "@kksh/api": "^0.0.52",
+    "@kksh/svelte": "0.1.7",
+    "bits-ui": "^0.21.16",
+    "clsx": "^2.1.1",
+    "echarts": "^5.5.1",
+    "lucide-svelte": "^0.416.0",
+    "tailwind-merge": "^2.4.0",
+    "tailwind-variants": "^0.2.1",
+    "valibot": "0.40.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/bun": "^1.1.10",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "svelte": "^5.0.3",
+    "svelte-check": "^4.0.5",
+    "tailwindcss": "^3.4.4",
+    "tslib": "^2.8.0",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.9"
+  },
+  "files": [
+    "dist",
+    ".gitignore",
+    "deno-src",
+    "deno.json",
+    "deno.lock"
+  ],
+  "packageManager": "pnpm@9.15.3"
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { open, path, shell, toast, ui } from "@kksh/api/ui/iframe"
+	import { Button, ModeWatcher, ThemeWrapper, updateTheme } from "@kksh/svelte"
+	import SpeedGauge from "$lib/components/SpeedGauge.svelte"
+	import StressSelect from "$lib/components/StressSelect.svelte"
+	import TargetDirSelect from "$lib/components/TargetDirSelect.svelte"
+	import { stress, targetDir } from "$lib/store"
+	import { onMount } from "svelte"
+	import { get } from "svelte/store"
+	import { type API } from "./types"
+
+	let readSpeedMBps = $state(0)
+	let writeSpeedMBps = $state(0)
+	let running = $state(false)
+
+	onMount(() => {
+		ui.registerDragRegion()
+		ui.showBackButton({ right: 0.5, bottom: 0.5 })
+
+		updateTheme({
+			theme: "neutral",
+			radius: 0.5,
+			lightMode: "dark"
+		})
+	})
+
+	async function startSpeedTest() {
+		running = true
+		const _targetDir = get(targetDir)
+		if (!_targetDir) {
+			toast.error("Target directory is not set")
+			return
+		}
+
+		const { rpcChannel, process } = await shell.createDenoRpcChannel<{}, API>(
+			"$EXTENSION/deno-src/lib.ts",
+			[],
+			{
+				allowAllRead: true,
+				allowAllWrite: true
+			},
+			{}
+		)
+
+		const api = rpcChannel.getAPI()
+		const testFileName = "kk-disk-speed-test"
+
+		const testFilePath = await path.join(_targetDir, testFileName)
+
+		const writeResult = await api.sequentialWriteTest(
+			{
+				filePath: testFilePath,
+				sizeInMB: get(stress) * 1024,
+				rounds: 3,
+				bufferSizeMB: 1,
+				keepTheFile: true
+			},
+			({ totalMB, totalDuration }) => {
+				writeSpeedMBps = totalMB / totalDuration
+			}
+		)
+		const readResult = await api.sequentialReadTest(testFilePath, {
+			deleteAfter: true
+		})
+		writeSpeedMBps = writeResult.totalMB / writeResult.totalDuration
+		console.log("writeDuration", writeResult)
+
+		readSpeedMBps = readResult.totalMB / readResult.totalDuration
+		console.log("readDuration", readResult)
+
+		process
+			.kill()
+			.then(() => {
+				console.log("process killed")
+			})
+			.catch((err) => {
+				console.error("error killing process", err)
+				toast.error(`Error killing process ${process.pid}`)
+			})
+			.finally(() => {
+				running = false
+			})
+	}
+</script>
+
+<svelte:window
+	on:keydown={(e) => {
+		if (e.key === "Escape") {
+			ui.goBack()
+		}
+	}}
+/>
+<ModeWatcher />
+
+<ThemeWrapper>
+	<main class="container flex flex-col gap-4 pt-10">
+		<div class="absolute left-0 top-0 h-10 w-screen" data-kunkun-drag-region></div>
+		<div class="flex items-center gap-4">
+			<strong>Stress</strong>
+			<StressSelect />
+		</div>
+		<div class="flex items-center gap-4">
+			<strong>Target Directory</strong>
+			<TargetDirSelect />
+			{#if $targetDir}
+				<button
+					onclick={() => {
+						if ($targetDir) {
+							open.folder($targetDir)
+						}
+					}}
+				>
+					<pre>{$targetDir}</pre>
+				</button>
+			{:else}
+				<pre class="text-red-500">Pick a target directory to test</pre>
+			{/if}
+		</div>
+		<Button disabled={!$targetDir || running} on:click={startSpeedTest}>Start Speed Test</Button>
+		<!-- <div class="flex items-center gap-4">
+			<strong>Write Speed</strong>
+			<pre>{writeSpeedMBps} MB/s</pre>
+		</div>
+		<div class="flex items-center gap-4">
+			<strong>Read Speed</strong>
+			<pre>{readSpeedMBps} MB/s</pre>
+		</div> -->
+		<div class="grid h-96 w-full grid-cols-2">
+			<SpeedGauge speedInMBps={writeSpeedMBps} title="Write Speed" class="h-full w-full" />
+			<SpeedGauge speedInMBps={readSpeedMBps} title="Read Speed" class="h-full w-full" />
+		</div>
+	</main>
+</ThemeWrapper>

src/app.css

@@ -0,0 +1,81 @@
+@import url("@kksh/svelte/themes");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+
+		--primary: 0 0% 9%;
+		--primary-foreground: 0 0% 98%;
+
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 0 0% 3.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 0 0% 3.9%;
+		--foreground: 0 0% 98%;
+
+		--muted: 0 0% 14.9%;
+		--muted-foreground: 0 0% 63.9%;
+
+		--popover: 0 0% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--card: 0 0% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--border: 0 0% 14.9%;
+		--input: 0 0% 14.9%;
+
+		--primary: 0 0% 98%;
+		--primary-foreground: 0 0% 9%;
+
+		--secondary: 0 0% 14.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--accent: 0 0% 14.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 0 0% 83.1%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+
+	body {
+		@apply bg-background text-foreground;
+		@apply overflow-x-hidden;
+	}
+}

src/assets/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  let count: number = 0
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button on:click={increment}>
+  count is {count}
+</button>

src/lib/components/SpeedGauge.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { echarts } from "$lib/echarts.action.svelte"
+	import { cn } from "$lib/utils"
+	// import * as echarts from "echarts"
+	import { onMount } from "svelte"
+
+	onMount(() => {})
+
+	const {
+		speedInMBps,
+		title,
+		class: className
+	}: { speedInMBps: number; title: string; class?: string } = $props()
+	const maxSpeed = $derived.by(() => {
+		if (speedInMBps <= 100) return 100
+		if (speedInMBps <= 500) return 500
+		if (speedInMBps <= 1_000) return 1_000
+		if (speedInMBps <= 2_000) return 2_000
+		if (speedInMBps <= 5_000) return 5_000
+		if (speedInMBps <= 10_000) return 10_000
+		return 100_000
+	})
+	const option = $derived({
+		tooltip: {
+			formatter: "{a} {b} : {c}%"
+		},
+		series: [
+			{
+				name: "Speed",
+				type: "gauge",
+				min: 0,
+				max: maxSpeed,
+				splitNumber: 5,
+				// progress: {
+				// 	show: true
+				// },
+				pointer: {
+					itemStyle: {
+						color: "auto"
+					}
+				},
+				axisTick: {
+					// distance: -15,
+					// length: 8,
+					// lineStyle: {
+					// 	color: "#fff",
+					// 	width: 2
+					// }
+				},
+				// splitLine: {
+				// 	distance: 0,
+				// 	// length: 30,
+				// 	lineStyle: {
+				// 		color: "#fff",
+				// 		width: 4
+				// 	}
+				// },
+				axisLabel: {
+					color: "inherit",
+					distance: 20,
+					fontSize: 15
+				},
+				axisLine: {
+					lineStyle: {
+						width: 10,
+						color: [
+							[0.3, "#67e0e3"],
+							[0.7, "#37a2da"],
+							[1, "#fd666d"]
+						]
+					}
+				},
+				detail: {
+					fontSize: 20,
+					valueAnimation: true,
+					formatter: "{value}MB/s",
+					color: "inherit"
+				},
+				title: {
+					fontSize: 20
+				},
+				data: [
+					{
+						value: Math.round(speedInMBps),
+						name: title
+					}
+				]
+			}
+		]
+	})
+</script>
+
+<div
+	class={cn("flex min-h-96 min-w-96 items-center justify-center", className)}
+	use:echarts={option}
+></div>

src/lib/components/StressSelect.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Select } from "@kksh/svelte"
+	import { stress } from "$lib/store"
+	import { type Selected } from "bits-ui"
+
+	const options = [
+		{ value: 1, label: "1GB" },
+		{ value: 2, label: "2GB" },
+		{ value: 3, label: "3GB" },
+		{ value: 4, label: "4GB" },
+		{ value: 5, label: "5GB" }
+	]
+
+	let selected: Selected<number> = $state(options[0])
+
+	$effect(() => {
+		if (selected) {
+			stress.set(selected.value)
+		}
+	})
+</script>
+
+<Select.Root bind:selected>
+	<Select.Trigger class="w-56">
+		<Select.Value placeholder="Pick a Stress Level" />
+	</Select.Trigger>
+	<Select.Content>
+		<Select.Group>
+			<Select.Label>Stress</Select.Label>
+			{#each options as option}
+				<Select.Item value={option.value} label={option.label}>{option.label}</Select.Item>
+			{/each}
+		</Select.Group>
+	</Select.Content>
+	<Select.Input name="stress-level" />
+</Select.Root>

src/lib/components/TargetDirSelect.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Icon from "@iconify/svelte"
+	import { clipboard, dialog, notification, toast } from "@kksh/api/ui/iframe"
+	import { Button } from "@kksh/svelte"
+	import { targetDir } from "$lib/store"
+
+	async function chooseDirectory() {
+		const result = await dialog.open({
+			directory: true
+		})
+		if (!result) return toast.warning("No directory selected")
+		targetDir.set(result)
+	}
+</script>
+
+<Button variant="outline" size="icon" on:click={chooseDirectory}>
+	<Icon icon="material-symbols:folder-outline" class="h-4 w-4" />
+</Button>

src/lib/components/ThemeCustomizer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ui } from "@kksh/api/ui/iframe"
+	import { ThemeCustomizerButton, updateTheme, type ThemeConfig } from "@kksh/svelte"
+	import { onMount } from "svelte"
+
+	let config: ThemeConfig = {
+		radius: 0.5,
+		theme: "zinc",
+		lightMode: "auto"
+	}
+	onMount(() => {
+		ui.getTheme().then((theme) => {
+			config = theme
+		})
+	})
+
+	$: updateTheme(config)
+</script>
+
+<ThemeCustomizerButton bind:config />

src/lib/echarts.action.svelte.ts

@@ -0,0 +1,20 @@
+/// <reference lib="dom" />
+import * as charts from "echarts"
+import { onMount } from "svelte"
+
+export function echarts(node: HTMLElement, option: Record<string, any>) {
+	let chart: charts.ECharts
+	chart = charts.init(node)
+	chart.setOption(option)
+	setTimeout(() => {}, 500)
+
+	return {
+		update(newOption: Record<string, any>) {
+			// option = newOption
+			chart.setOption(newOption)
+		},
+		destroy() {
+			chart.dispose() // Clean up when component is destroyed
+		}
+	}
+}

src/lib/store.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store"
+
+export const stress = writable(1)
+export const targetDir = writable<string | undefined>(undefined)

src/lib/utils.ts

@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+	y?: number;
+	x?: number;
+	start?: number;
+	duration?: number;
+};
+
+export const flyAndScale = (
+	node: Element,
+	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === "none" ? "" : style.transform;
+
+	const scaleConversion = (
+		valueA: number,
+		scaleA: [number, number],
+		scaleB: [number, number]
+	) => {
+		const [minA, maxA] = scaleA;
+		const [minB, maxB] = scaleB;
+
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
+
+		return valueB;
+	};
+
+	const styleToString = (
+		style: Record<string, number | string | undefined>
+	): string => {
+		return Object.keys(style).reduce((str, key) => {
+			if (style[key] === undefined) return str;
+			return str + `${key}:${style[key]};`;
+		}, "");
+	};
+
+	return {
+		duration: params.duration ?? 200,
+		delay: 0,
+		css: (t) => {
+			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};

src/main.ts

@@ -0,0 +1,9 @@
+import { mount } from "svelte"
+import "./app.css"
+import App from "./App.svelte"
+
+const app = mount(App, {
+	target: document.getElementById("app")!
+})
+
+export default app

src/model.ts

@@ -0,0 +1,16 @@
+export interface DiskSpeedTestInput {
+	targetPath: string
+	sequential: {
+		stressFileSizeMB: number
+	}
+	random: {
+		stressFileSizeMB: number
+		iterations: number
+		blockSize: number
+	}
+}
+
+export interface DiskSpeedTestOutput {
+	writeSpeedMBps: number
+	readSpeedMBps: number
+}

src/types.ts

@@ -0,0 +1,15 @@
+export type Progress = { totalMB: number; totalDuration: number }
+export interface API {
+	sequentialWriteTest: (
+		options: {
+			filePath: string
+			sizeInMB: number
+			rounds: number
+			bufferSizeMB: number
+			keepTheFile?: boolean
+		},
+		callback?: (progress: Progress) => void
+	) => Promise<Progress>
+	sequentialReadTest: (filePath: string, options: { deleteAfter: boolean }) => Promise<Progress>
+	createEmptyFile: (filePath: string, sizeInMB: number) => Promise<void>
+}

src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+export default {
+	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+	// for more information about preprocessors
+	preprocess: vitePreprocess()
+}

tailwind.config.ts

@@ -0,0 +1,67 @@
+import type { Config } from "tailwindcss"
+import { fontFamily } from "tailwindcss/defaultTheme"
+
+const config: Config = {
+	darkMode: ["class"],
+	content: [
+		"./src/**/*.{html,js,svelte,ts}",
+		"./node_modules/@kksh/svelte/dist/**/*.{html,js,svelte,ts}"
+	],
+	safelist: ["dark"],
+	theme: {
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px"
+			}
+		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border) / <alpha-value>)",
+				input: "hsl(var(--input) / <alpha-value>)",
+				ring: "hsl(var(--ring) / <alpha-value>)",
+				background: "hsl(var(--background) / <alpha-value>)",
+				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				primary: {
+					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+				},
+				card: {
+					DEFAULT: "hsl(var(--card) / <alpha-value>)",
+					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+				}
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)"
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
+	}
+}
+
+export default config

tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    "paths": {
+      "$lib": [
+        "./src/lib"
+      ],
+      "$lib/*": [
+        "./src/lib/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.svelte"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,13 @@
+import path from "path"
+import { svelte } from "@sveltejs/vite-plugin-svelte"
+import { defineConfig } from "vite"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [svelte()],
+	resolve: {
+		alias: {
+			$lib: path.resolve("./src/lib")
+		}
+	}
+})