init

.gitignore

@@ -0,0 +1,24 @@
+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

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

CHANGELOG.md

@@ -0,0 +1,15 @@
+# template-ext-sveltekit
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.4
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [fba6a49]
+  - @kksh/svelte@0.0.2

README.md

@@ -0,0 +1,69 @@
+# Kunkun Custom UI Extension Template (SvelteKit)
+
+[Custom UI Extension Documentation](https://docs.kunkun.sh/extensions/custom-ui-ext/)
+
+This is a template for a custom UI extension.
+
+This type of extension is basically a static website. You can use any frontend framework you like, this template uses [SvelteKit](https://svelte.dev/).
+
+It is assumed that you have some knowledge of frontend development with SvelteKit.
+
+## Development
+
+Development is the same as developing a normal website.
+
+```bash
+pnpm install
+pnpm dev
+pnpm build
+```
+
+- To develop and preview the extension in Kunkun, you need to run the `Add Dev Extension` command in Kunkun, and register this extension's path.
+
+In `package.json`, `"devMain"` is the url for development server, and `"main"` is the path to static `.html` file for production.
+
+To load the extension in development mode, you have to enable it with `Toggle Dev Extension Live Load Mode` command in Kunkun. A `Live` badge will be shown on the commands. This indicates that dev extensions will be loaded from `devMain` instead of `main`.
+
+## Advanced
+
+### Rendering Mode
+
+This is a Meta-Framework template, and already configured with SSG rendering mode.
+Please do not enable SSR unless you know what you are doing.
+There will not be a JS runtime in production, and Kunkun always load the extension as static files.
+
+The main benefit of using a meta-framework is that it comes with routing, and will output multiple `.html` files, which makes multi-command support much easier.
+
+## Verify Build and Publish
+
+```bash
+pnpm build # make sure the build npm script works
+npx kksh@latest verify # Verify some basic settings before publishing
+```
+
+It is recommended to build the extension with the same environment our CI uses.
+
+The docker image used by our CI is `huakunshen/kunkun-ext-builder:latest`.
+
+You can use the following command to build the extension with the same environment our CI uses.
+This requires you to have docker installed, and the shell you are using has access to it via `docker` command.
+
+```bash
+npx kksh@latest build # Build the extension with
+```
+
+`pnpm` is used to install dependencies and build the extension.
+
+The docker image environment also has `node`, `pnpm`, `npm`, `bun`, `deno` installed.
+If your build failed, try debug with `huakunshen/kunkun-ext-builder:latest` image in interative mode and bind your extension volume to `/workspace`.
+
+After build successfully, you should find a tarball file ends with `.tgz` in the root of your extension.
+The tarball is packaged with `npm pack` command. You can uncompress it to see if it contains all the necessary files.
+
+This tarball is the final product that will be published and installed in Kunkun. You can further verify your extension by installing this tarball directly in Kunkun.
+
+After verifying the tarball, it's ready to be published.
+
+Fork [KunkunExtensions](https://github.com/kunkunsh/KunkunExtensions) repo, add your extension to the `extensions` directory, and create a PR.
+
+Once CI passed and PR merged, you can use your extension in Kunkun.

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
+}

eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];

package.json

@@ -0,0 +1,101 @@
+{
+	"$schema": "https://schema.kunkun.sh",
+	"name": "kunkun-ext-system-info",
+	"version": "0.0.6",
+	"repository": "https://github.com/kunkunsh/kunkun-ext-system-info",
+	"kunkun": {
+		"name": "System Info",
+		"shortDescription": "System Info",
+		"longDescription": "System Info",
+		"identifier": "system-info",
+		"icon": {
+			"type": "iconify",
+			"value": "grommet-icons:system"
+		},
+		"demoImages": [],
+		"permissions": [
+			"system-info:all",
+			"clipboard:read-text",
+			"notification:all",
+			{
+				"permission": "shell:execute",
+				"allow": [
+					{
+						"cmd": {
+							"program": "ioreg",
+							"args": [
+								"-arn",
+								"AppleSmartBattery"
+							]
+						}
+					}
+				]
+			}
+		],
+		"customUiCmds": [],
+		"templateUiCmds": [
+			{
+				"name": "Battery Info",
+				"main": "dist/battery-info.js",
+				"icon": {
+					"type": "iconify",
+					"value": "emojione:battery"
+				},
+				"cmds": []
+			}
+		]
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"dev:template": "bun scripts/build-template-ext.ts dev",
+		"build:template": "bun scripts/build-template-ext.ts",
+		"build:custom": "vite build",
+		"build": "bun scripts/build.ts",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@kksh/api": "^0.0.48",
+		"@kksh/svelte5": "0.1.10",
+		"clsx": "^2.1.1",
+		"lucide-svelte": "^0.462.0",
+		"mode-watcher": "^0.5.0",
+		"tailwind-merge": "^2.5.5",
+		"tailwind-variants": "^0.3.0",
+		"tauri-plugin-network-api": "^2.0.4",
+		"tauri-plugin-system-info-api": "^2.0.8"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.6",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@tailwindcss/typography": "^0.5.15",
+		"@types/eslint": "^9.6.1",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.16.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.46.0",
+		"globals": "^15.12.0",
+		"postcss": "^8.4.49",
+		"prettier": "^3.4.1",
+		"prettier-plugin-svelte": "^3.3.2",
+		"prettier-plugin-tailwindcss": "^0.6.9",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^3.4.15",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.16.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"files": [
+		"dist",
+		"build",
+		".gitignore"
+	],
+	"packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
+}

postcss.config.js

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

queue.ts

@@ -0,0 +1,19 @@
+type QPayload<T> = {
+    data: T;
+    timestamp: Date;
+};
+
+class Q<T> {
+    private queue: QPayload<T>[] = [];
+
+    constructor(private maxSize: number) {}
+
+    enqueue(item: T) {
+        if (this.queue.length >= this.maxSize) {
+            throw new Error("Queue is full");
+        }
+        this.queue.push({ data: item, timestamp: new Date() });
+    }
+
+    
+}

scripts/build-template-ext.ts

@@ -0,0 +1,36 @@
+import { watch } from 'fs';
+import { join } from 'path';
+import { refreshTemplateWorkerExtension } from '@kksh/api/dev';
+import { $ } from 'bun';
+
+const entrypoints = ['./template-src/battery-info.ts'];
+
+async function build() {
+	try {
+		// for (const entrypoint of entrypoints) {
+		// 	await $`bun build --minify --target=browser --outdir=./dist ${entrypoint}`;
+		// }
+		await Bun.build({
+			entrypoints,
+			target: 'browser',
+			outdir: './dist',
+			minify: false
+		});
+		if (Bun.argv.includes('dev')) {
+			await refreshTemplateWorkerExtension();
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+const srcDir = join(import.meta.dir, '..', 'template-src');
+
+await build();
+
+if (Bun.argv.includes('dev')) {
+	console.log(`Watching ${srcDir} for changes...`);
+	watch(srcDir, { recursive: true }, async (event, filename) => {
+		await build();
+	});
+}

scripts/build.ts

@@ -0,0 +1,4 @@
+import { $ } from 'bun';
+
+await $`bun build:custom`;
+await $`bun build:template`;

src/app.css

@@ -0,0 +1,80 @@
+@import url("@kksh/svelte5/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;
+	}
+}

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/components/ThemeCustomizer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ThemeCustomizerButton, type ThemeConfig, updateTheme } from '@kksh/svelte5';
+	import { ui } from '@kksh/api/ui/iframe';
+	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/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/lib/stores/q.ts

@@ -0,0 +1,34 @@
+import { get, writable } from 'svelte/store';
+import { CpuInfo, MemoryInfo, Component } from 'tauri-plugin-system-info-api';
+
+export type QPayload<T> = {
+	value: T;
+	timestamp: Date;
+};
+
+export function createQueueStore<T>(maxSize: number) {
+	const store = writable<QPayload<T>[]>([]);
+
+	return {
+		...store,
+		enqueue: (value: T) => {
+			store.update((q) => {
+				q.push({ value, timestamp: new Date() });
+				if (q.length > maxSize) {
+					q.shift();
+				}
+				return q;
+			});
+		},
+		dequeue: () => {
+			let item = get(store)?.shift();
+			store.update((q) => q.slice(1));
+			return item;
+		},
+		last: (n: number) => get(store)?.slice(-n),
+		data: () => get(store)
+	};
+}
+export const cpuStore = createQueueStore<CpuInfo>(10);
+export const memoryStore = createQueueStore<MemoryInfo>(10);
+export const componentStore = createQueueStore<Component>(10);

src/lib/types.ts

@@ -0,0 +1 @@
+import { CpuInfo, MemoryInfo } from 'tauri-plugin-system-info-api';

src/lib/utils.ts

@@ -0,0 +1,56 @@
+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/routes/+layout.svelte

@@ -0,0 +1,19 @@
+<script>
+	import '../app.css';
+	import { ModeWatcher } from 'mode-watcher';
+	import { ThemeWrapper, updateTheme } from '@kksh/svelte5';
+	import { onMount } from 'svelte';
+	import { ui } from '@kksh/api/ui/iframe';
+
+	onMount(() => {
+		ui.registerDragRegion();
+		ui.getTheme().then((theme) => {
+			updateTheme(theme);
+		});
+	});
+</script>
+
+<ModeWatcher />
+<ThemeWrapper>
+	<slot />
+</ThemeWrapper>

src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = false;

src/routes/+page.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import { clipboard, notification, ui, toast } from '@kksh/api/ui/iframe';
+	import {
+		ModeToggle,
+		Button,
+		Command,
+		ModeWatcher,
+		Separator,
+		ThemeWrapper,
+		updateTheme
+	} from '@kksh/svelte5';
+	import ThemeCustomizer from '$lib/components/ThemeCustomizer.svelte';
+	import {
+		Calculator,
+		Calendar,
+		CreditCard,
+		Settings,
+		SettingsIcon,
+		Smile,
+		User
+	} from 'lucide-svelte';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		ui.registerDragRegion();
+		notification.sendNotification('Hello from template-ext-svelte');
+		ui.getTheme().then((theme) => {
+			updateTheme(theme);
+		});
+	});
+
+	let highlighted = '';
+	let searchTerm = '';
+</script>
+
+<ModeWatcher />
+
+<ThemeWrapper>
+	<Command.Root class="h-screen rounded-lg border shadow-md" bind:value={highlighted}>
+		<Command.Input placeholder="Type a command or search..." autofocus bind:value={searchTerm} />
+		<div class="grow">
+			<Command.List>
+				<Command.Empty>No results found.</Command.Empty>
+				<Command.Group heading="Suggestions">
+					<Command.Item>
+						<Calendar class="mr-2 h-4 w-4" />
+
+						<span>Calendar</span>
+					</Command.Item>
+					<Command.Item>
+						<Smile class="mr-2 h-4 w-4" />
+						<span>Search Emoji</span>
+					</Command.Item>
+					<Command.Item>
+						<Calculator class="mr-2 h-4 w-4" />
+						<span>Calculator</span>
+					</Command.Item>
+				</Command.Group>
+				<Command.Separator />
+				<Command.Group heading="Settings">
+					<Command.Item>
+						<User class="mr-2 h-4 w-4" />
+						<span>Profile</span>
+						<Command.Shortcut>⌘P</Command.Shortcut>
+					</Command.Item>
+					<Command.Item value="billllling">
+						<CreditCard class="mr-2 h-4 w-4" />
+						<span>Billing</span>
+						<Command.Shortcut>⌘B</Command.Shortcut>
+					</Command.Item>
+					<Command.Item>
+						<Settings class="mr-2 h-4 w-4" />
+						<span>Settings</span>
+						<Command.Shortcut>⌘S</Command.Shortcut>
+					</Command.Item>
+				</Command.Group>
+			</Command.List>
+		</div>
+		<div class="flex items-center justify-between">
+			<SettingsIcon class="ml-2 h-4 w-4" />
+			<div class="flex items-center space-x-2">
+				<Button variant="ghost" size="sm">
+					Open Application
+					<kbd class="ml-1">↵</kbd>
+				</Button>
+				<Separator orientation="vertical" />
+				<a href="{base}/about"><Button>About Page</Button></a>
+				<Button
+					onclick={async () => {
+						toast.success(await clipboard.readText());
+					}}
+				>
+					Read Clipboard
+				</Button>
+				<ModeToggle />
+				<ThemeCustomizer />
+			</div>
+		</div>
+	</Command.Root>
+</ThemeWrapper>

src/routes/about/+page.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { base } from '$app/paths';
+	import { Alert, Button, ThemeWrapper } from '@kksh/svelte5';
+</script>
+
+<ThemeWrapper>
+	<Alert.Root>
+		<Alert.Title class="text-3xl font-bold">About Page</Alert.Title>
+		<Alert.Description>
+			<a href="{base}/">
+				<Button>Home Page</Button>
+			</a>
+		</Alert.Description>
+	</Alert.Root>
+</ThemeWrapper>

svelte.config.js

@@ -0,0 +1,21 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter({}),
+		alias: {
+			'@/*': './src/lib/*'
+		}
+	}
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,67 @@
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+	darkMode: ['class'],
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		'node_modules/@kksh/svelte5/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;

template-src/battery-info.ts

@@ -0,0 +1,223 @@
+import {
+	Action,
+	expose,
+	Form,
+	fs,
+	Icon,
+	IconEnum,
+	List,
+	os,
+	path,
+	shell,
+	sysInfo,
+	toast,
+	ui,
+	utils,
+	WorkerExtension,
+	type ListSchema
+} from '@kksh/api/ui/worker';
+import { getMacBatteryInfo } from './mac-ioreg';
+
+async function parseBatteryInfo(
+	batteries: Awaited<ReturnType<typeof sysInfo.batteries>>
+): Promise<List.Section[]> {
+	const platform = await os.platform();
+	return batteries.map((battery) => {
+		const items: List.Item[] = [];
+		// TODO: not sure what the unit is for time_to_empty, time_to_full, and energy_rate
+		// if (battery.time_to_empty) {
+		// 	items.push(
+		// 		new List.Item({
+		// 			title: "Time Remaining",
+		// 			value: "time-remaining",
+		// 			subTitle: battery.time_to_empty.toString()
+		// 		})
+		// 	)
+		// }
+		// if (battery.time_to_full) {
+		// 	items.push(
+		// 		new List.Item({
+		// 			title: "Time to Full",
+		// 			value: "time-to-full",
+		// 			subTitle: battery.time_to_full.toString()
+		// 		})
+		// 	)
+		// }
+		items.push(
+			new List.Item({
+				title: 'Voltage',
+				value: 'voltage',
+				subTitle: `${battery.voltage.toFixed(2).toString()}V`,
+				icon: new Icon({
+					type: IconEnum.Iconify,
+					value: 'openmoji:high-voltage'
+				})
+			})
+		);
+		if (battery.temperature_kelvin) {
+			// temperature C and F are derived from kelvin under the hood, so we can use the same value for all
+			items.push(
+				new List.Item({
+					title: 'Temperature',
+					value: 'temperature',
+					subTitle: `${battery.temperature_celsius?.toFixed(2)}°C / ${battery.temperature_fahrenheit?.toFixed(2)}°F`,
+					icon: new Icon({
+						type: IconEnum.Iconify,
+						value: 'uil:temperature-half'
+					})
+				})
+			);
+		}
+		items.push(
+			new List.Item({
+				title: 'State',
+				value: 'state',
+				subTitle: battery.state.toString(),
+				icon: new Icon({
+					type: IconEnum.Iconify,
+					value: 'tabler:plug'
+				})
+			})
+		);
+		items.push(
+			new List.Item({
+				title: 'Cycle Count',
+				value: 'cycle-count',
+				subTitle: battery.cycle_count?.toString() ?? '--',
+				icon: new Icon({
+					type: IconEnum.Iconify,
+					value: 'material-symbols:cycle'
+				})
+			})
+		);
+		if (platform !== 'macos') {
+			items.push(
+				new List.Item({
+					title: 'Percentage',
+					value: 'percentage',
+					subTitle: `${(battery.state_of_charge * 100).toFixed(2)}%`
+				})
+			);
+		}
+		items.push(
+			new List.Item({
+				title: 'Health',
+				value: 'health',
+				subTitle: `${(battery.state_of_health * 100).toFixed(2)}%`,
+				icon: new Icon({
+					type: IconEnum.Iconify,
+					value: 'map:health'
+				})
+			})
+		);
+		return new List.Section({
+			items
+		});
+	});
+}
+
+async function getBatteryInSections(): Promise<List.Section[]> {
+	const platform = await os.platform();
+	const batteries = await sysInfo.batteries();
+	const sections: List.Section[] = await parseBatteryInfo(batteries);
+	if (platform === 'macos') {
+		// mac is expected to have only one battery
+		const macInfo = await getMacBatteryInfo();
+		if (macInfo) {
+			sections[0].items = [
+				new List.Item({
+					title: 'Percentage',
+					value: 'percentage',
+					subTitle: `${macInfo.CurrentCapacity.toString()}%`,
+					icon: new Icon({
+						type: IconEnum.Iconify,
+						value: 'ic:outline-percentage'
+					})
+				}),
+				new List.Item({
+					title: 'Time Remaining',
+					value: 'time-remaining',
+					subTitle: macInfo.timeRemainingFormatted,
+					icon: new Icon({
+						type: IconEnum.Iconify,
+						value: 'mdi:clock-outline'
+					})
+				}),
+				new List.Item({
+					title: 'Power Source',
+					value: 'power-source',
+					subTitle: macInfo.formattedPowerSource,
+					icon: new Icon({
+						type: IconEnum.Iconify,
+						value: 'ic:outline-power'
+					})
+				}),
+				new List.Item({
+					title: 'Condition',
+					value: 'condition',
+					subTitle: macInfo.formattedCondition,
+					icon: new Icon({
+						type: IconEnum.Iconify,
+						value: 'emojione:battery'
+					})
+				}),
+				new List.Item({
+					title: 'Charge',
+					value: 'charge',
+					subTitle: macInfo.formattedCurrentCapacity,
+					icon: new Icon({
+						type: IconEnum.Iconify,
+						value: 'emojione:battery'
+					})
+				}),
+				new List.Item({
+					title: 'Power Usage',
+					value: 'power-usage',
+					subTitle: macInfo.powerUsage,
+					icon: new Icon({
+						type: IconEnum.Iconify,
+						value: 'emojione:battery'
+					})
+				}),
+				...sections[0].items
+			];
+		}
+	}
+	return sections;
+}
+
+async function run() {
+	getBatteryInSections().then((sections) => {
+		ui.render(
+			new List.List({
+				sections
+			})
+		);
+	});
+}
+
+class BatteryInfo extends WorkerExtension {
+	intervalId: NodeJS.Timer | null = null;
+	async onBeforeGoBack() {
+		if (this.intervalId) {
+			clearInterval(this.intervalId);
+			this.intervalId = null;
+		}
+		this.intervalId = null;
+	}
+	load() {
+		ui.setSearchBarPlaceholder('Search...');
+		ui.render(
+			new List.List({
+				items: []
+			})
+		);
+		this.intervalId = setInterval(() => {
+			console.log('Battery info updated');
+			run();
+		}, 10_000);
+		return run();
+	}
+}
+
+expose(new BatteryInfo());

template-src/mac-ioreg.ts

@@ -0,0 +1,153 @@
+import {
+	Action,
+	expose,
+	Form,
+	fs,
+	Icon,
+	IconEnum,
+	List,
+	path,
+	shell,
+	sysInfo,
+	toast,
+	ui,
+	utils,
+	WorkerExtension
+} from '@kksh/api/ui/worker';
+
+export async function getMacBatteryInfo() {
+	const batteryInfoRet = await shell
+		.createCommand('ioreg', ['-arn', 'AppleSmartBattery'])
+		.execute();
+	if (batteryInfoRet.code !== 0) {
+		toast.error('Failed to get battery info');
+	}
+	const batteryInfoStdout = batteryInfoRet.stdout;
+
+	const ioreg: any = await utils.plist.parse(batteryInfoStdout);
+
+	// check if ioreg is an array
+	if (!Array.isArray(ioreg)) {
+		toast.error('Failed to get battery info');
+		return null;
+	}
+	const batteryInfo = ioreg[0];
+	const {
+		TimeRemaining,
+		Voltage,
+		Amperage,
+		PermanentFailureStatus,
+		AppleRawCurrentCapacity,
+		CurrentCapacity,
+		AppleRawMaxCapacity,
+		MaxCapacity,
+		CycleCount,
+		ExternalConnected,
+		AdapterDetails,
+		Temperature
+	} = batteryInfo;
+	/* -------------------------------------------------------------------------- */
+	/*                               Time Remaining                               */
+	/* -------------------------------------------------------------------------- */
+	const hoursRemaining = Math.floor(TimeRemaining / 60);
+	const minutesRemaining = (TimeRemaining % 60).toLocaleString('en-US', {
+		minimumIntegerDigits: 2
+	});
+	/* -------------------------------------------------------------------------- */
+	/*                                  Condition                                 */
+	/* -------------------------------------------------------------------------- */
+	const status = PermanentFailureStatus === 0 ? 'Good' : 'Failure';
+	const formattedCondition = PermanentFailureStatus !== undefined ? `${status}` : '--';
+
+	const timeRemainingFormatted =
+		TimeRemaining !== undefined && TimeRemaining < 1500 && TimeRemaining !== 0
+			? `${hoursRemaining}:${minutesRemaining}`
+			: '--';
+	/* -------------------------------------------------------------------------- */
+	/*                                Power Usage                                 */
+	/* -------------------------------------------------------------------------- */
+	const power = Math.round((Voltage / 1000) * (Amperage / 1000));
+	const powerUsage = Amperage && Voltage ? `${power} W (${Amperage} mA)` : '--';
+	/* -------------------------------------------------------------------------- */
+	/*                              Current Capacity                              */
+	/* -------------------------------------------------------------------------- */
+	const currentCap = AppleRawCurrentCapacity || CurrentCapacity;
+	const maxCap = AppleRawMaxCapacity || MaxCapacity;
+	const formattedCurrentCapacity =
+		currentCap && maxCap ? `${currentCap} mAh / ${maxCap} mAh` : '--';
+
+	/* -------------------------------------------------------------------------- */
+	/*                                Power Source                                */
+	/* -------------------------------------------------------------------------- */
+	const adapterName = AdapterDetails ? AdapterDetails['Name'] : '';
+	const adapterSerial = AdapterDetails ? AdapterDetails['SerialString'] : '';
+	const adapterLabel =
+		adapterName && adapterSerial ? `${adapterName} (${adapterSerial})` : 'Power Adapter';
+	const powerSource = ExternalConnected === true ? adapterLabel : 'Battery';
+
+	const formattedPowerSource = ExternalConnected !== undefined ? `${powerSource}` : '--';
+
+	/* -------------------------------------------------------------------------- */
+	/*                                 Temperature                                */
+	/* -------------------------------------------------------------------------- */
+	const celcius = Math.round(Temperature / 100);
+	const fahrenheit = Math.round(celcius * (9 / 5) + 32);
+	const temeratureFormatted = Temperature ? `${celcius} °C / ${fahrenheit} °F` : '--';
+	return {
+		minutesRemaining,
+		CurrentCapacity,
+		formattedCondition,
+		timeRemainingFormatted,
+		powerUsage,
+		formattedCurrentCapacity,
+		formattedPowerSource,
+		temeratureFormatted
+	};
+}
+
+// return ui.render(
+//     new List.List({
+//         items: [
+//             new List.Item({
+//                 title: "Time Remaining",
+//                 value: "time-remaining",
+//                 subTitle: timeRemainingFormatted
+//             }),
+//             new List.Item({
+//                 title: "Percentage",
+//                 value: "percentage",
+//                 subTitle: `${CurrentCapacity.toString()}%`
+//             }),
+//             new List.Item({
+//                 title: "Power Usage",
+//                 value: "power-usage",
+//                 subTitle: powerUsage
+//             }),
+//             new List.Item({
+//                 title: "Condition",
+//                 value: "condition",
+//                 subTitle: formattedCondition
+//             }),
+//             new List.Item({
+//                 title: "Charge",
+//                 value: "charge",
+//                 subTitle: formattedCurrentCapacity
+//             }),
+//             new List.Item({
+//                 title: "Cycle Count",
+//                 value: "cycle-count",
+//                 subTitle: CycleCount.toString()
+//             }),
+//             new List.Item({
+//                 title: "Power Source",
+//                 value: "power-source",
+//                 subTitle: formattedPowerSource
+//             }),
+//             new List.Item({
+//                 title: "Temperature",
+//                 value: "temperature",
+//                 subTitle: temeratureFormatted
+//             })
+//         ]
+//     })
+// )

template-src/utils/linux.ts

@@ -0,0 +1,13 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Memory                                   */
+/* -------------------------------------------------------------------------- */
+/**
+ * ```bash
+ * ps -eo pid,comm,%mem --sort=-%mem | head -n 6
+ * top -b -o +%MEM | head -n 15
+ * ```
+ */
+export function getTopMemoryProcesses() {
+    // TODO: Implement this function
+    throw new Error('Not implemented');
+}

template-src/utils/mac.ts

@@ -0,0 +1,70 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Memory                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * ```bash
+ * /usr/bin/top -l 1 -o mem -n 5 -stats command,mem
+ * ```
+ */
+export function getTopMemoryProcesses() {
+	// TODO: Implement this function
+	throw new Error("Not implemented")
+}
+
+// interface MemoryInterface {
+// 	memTotal: number
+// 	memUsed: number
+// }
+
+// https://github.com/raycast/extensions/blob/fcdfc5a643eb998696befbf229f5a7c34533e893/extensions/system-monitor/src/Memory/MemoryUtils.ts#L3
+// export const getTotalMemoryUsage = async (): Promise<MemoryInterface> => {
+// 	const pHwPagesize = await execp("/usr/sbin/sysctl -n hw.pagesize")
+// 	const hwPagesize: number = parseFloat(pHwPagesize)
+// 	const pMemTotal = await execp("/usr/sbin/sysctl -n hw.memsize")
+// 	const memTotal: number = parseFloat(pMemTotal) / 1024 / 1024
+// 	const pVmPagePageableInternalCount = await execp(
+// 		"/usr/sbin/sysctl -n vm.page_pageable_internal_count"
+// 	)
+// 	const pVmPagePurgeableCount = await execp("/usr/sbin/sysctl -n vm.page_purgeable_count")
+// 	const pagesApp: number =
+// 		parseFloat(pVmPagePageableInternalCount) - parseFloat(pVmPagePurgeableCount)
+// 	const pPagesWired = await execp("/usr/bin/vm_stat | awk '/ wired/ { print $4 }'")
+// 	const pagesWired: number = parseFloat(pPagesWired)
+// 	const pPagesCompressed = await execp("/usr/bin/vm_stat | awk '/ occupied/ { printf $5 }'")
+// 	const pagesCompressed: number = parseFloat(pPagesCompressed) || 0
+// 	const memUsed = ((pagesApp + pagesWired + pagesCompressed) * hwPagesize) / 1024 / 1024
+
+// 	return {
+// 		memTotal: memTotal,
+// 		memUsed: memUsed
+// 	}
+// }
+
+/* -------------------------------------------------------------------------- */
+/*                                   Network                                  */
+/* -------------------------------------------------------------------------- */
+// https://github.com/raycast/extensions/blob/fcdfc5a643eb998696befbf229f5a7c34533e893/extensions/system-monitor/src/Network/NetworkUtils.ts#L4-L23
+
+// Get Process Network Speed
+// const nettopOptions = [
+// 	"time",
+// 	"interface",
+// 	"state",
+// 	"rx_dupe",
+// 	"rx_ooo",
+// 	"re-tx",
+// 	"rtt_avg",
+// 	"rcvsize",
+// 	"tx_win",
+// 	"tc_class",
+// 	"tc_mgt",
+// 	"cc_algo",
+// 	"P",
+// 	"C",
+// 	"R",
+// 	"W",
+// 	"arch"
+// ]
+// const output = await execp(`/usr/bin/nettop -P -L 1 -k ${nettopOptions.join()}`)
+

template-src/utils/windows.ts

@@ -0,0 +1,3 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Memory                                   */
+/* -------------------------------------------------------------------------- */

tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});