docs: more docs

docs/src/components/api/clipboard.astro

@@ -0,0 +1,18 @@
+---
+import { permissionDescriptions } from "@kksh/api/ui/permissions"
+import { clipboard } from "@kksh/api/ui/worker"
+
+const methodNames = Object.keys(clipboard)
+// const permissions = Object.entries(permissionDescriptions)
+
+---
+
+<!-- <pre>{JSON.stringify(permissionDescriptions, null, 2)}</pre> -->
+
+{
+	methodNames.map((name) => (
+		<li>
+			<code>{name}</code>: <span>{permissionDescriptions[name]}</span>
+		</li>
+	))
+}

docs/src/components/demo/react/button.astro

@@ -1,5 +1,5 @@
 ---
-import { Button } from "@kksh/react"
+import { Button as Btn } from "@kksh/react"
 ---
 
-<Button client:only="react">Hello Kunkun!</Button>
+<Btn client:only="react">Hello Kunkun!</Btn>

docs/src/components/dev-tools/permission-explanation.astro

@@ -1,5 +1,6 @@
 ---
 import { permissionDescriptions } from "@kksh/api/ui/permissions"
+import { requiredPermissionMap } from "../../../../packages/api/src/ui/server/fs"
 
 // permissionDescriptions is an object with keys as permission names and values as descriptions
 const permissions = Object.entries(permissionDescriptions)
@@ -9,33 +10,33 @@ const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str
 const groups = Array.from(new Set(permissions.map(([permission]) => permission.split(":")[0])))
 // reconstruct permissions object with group as key
 const permissionGroups = groups.map((group) => {
-  const groupPermissions = permissions.filter(([permission]) => permission.startsWith(group))
-  return {
-    group,
-    permissions: groupPermissions.map(([permission, description]) => ({
-      permission,
-      description
-    }))
-  }
+	const groupPermissions = permissions.filter(([permission]) => permission.startsWith(group))
+	return {
+		group,
+		permissions: groupPermissions.map(([permission, description]) => ({
+			permission,
+			description
+		}))
+	}
 })
 ---
 
 {
-  permissionGroups.map(({ group, permissions }) => (
-    <div>
-      <h4>{capitalizeFirstLetter(group)}</h2>
-      <ul>
-        {permissions.map(({ permission, description }) => (
-          <li>
-            <code>
-              <strong>{permission}</strong>
-            </code>
-            <ul>
-              <li>{description}</li>
-            </ul>
-          </li>
-        ))}
-      </ul>
-    </div>
-  ))
+	permissionGroups.map(({ group, permissions }) => (
+		<div>
+			<h4>{capitalizeFirstLetter(group)}</h4>
+			<ul>
+				{permissions.map(({ permission, description }) => (
+					<li>
+						<code>
+							<strong>{permission}</strong>
+						</code>
+						<ul>
+							<li>{description}</li>
+						</ul>
+					</li>
+				))}
+			</ul>
+		</div>
+	))
 }

docs/src/content/docs/developer/API/Storage.mdx

@@ -1,6 +1,5 @@
 ---
-title: Storage API
-description: Jarvis Storage API
+title: Storage
 sidebar:
   hidden: true
 ---

docs/src/content/docs/developer/API/clipboard.mdx

@@ -1,12 +1,44 @@
 ---
-title: Clipboard API
+title: Clipboard
 sidebar:
   badge:
     text: WIP
     variant: caution
 ---
 
+import ClipboardAPI from '@/components/api/clipboard.astro'
+
 The clipboard API is the same for `@kksh/api/UI/iframe` and `@kksh/api/ui/worker`.
 
+## Clipboard API Methods
+
+
+<ClipboardAPI />
+
+
+## Sample Usage
+
+```ts
+// Check if the clipboard has data
+const hasFiles: boolean = await clipboard.hasFiles()
+const hasHTML: boolean = await clipboard.hasHTML()
+const hasImage: boolean = await clipboard.hasImage()
+const hasRTF: boolean = await clipboard.hasRTF()
+const hasText: boolean = await clipboard.hasText()
 
+// Read data from the clipboard
+const text: string = await clipboard.readText()
+const imageBinary: Blob = await clipboard.readImageBinary('Blob') as Blob
+const imageBase64: string = await clipboard.readImageBase64()
+const html: string = await clipboard.readHtml()
+const files: string[] = await clipboard.readFiles()
+const rtf: string = await clipboard.readRtf()
 
+// Write data to the clipboard
+await clipboard.writeText('Hello, World!')
+await clipboard.writeImageBinary(Array.from(new Uint8Array(await imageBinary.arrayBuffer())));
+await clipboard.writeHtmlAndText('<h1>Hello, World!</h1>', 'Hello, World!')
+await clipboard.writeFiles(['file1.txt', 'file2.txt'])
+await clipboard.writeRtf(rtf)
+await clipboard.writeImageBase64(imageBase64)
+```

docs/src/content/docs/developer/API/db.mdx

@@ -1,5 +1,5 @@
 ---
-title: Database API
+title: Database
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/dialog.mdx

@@ -1,5 +1,5 @@
 ---
-title: Dialog API
+title: Dialog
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/event.mdx

@@ -1,7 +1,18 @@
 ---
-title: Event API
+title: Event
 sidebar:
   badge:
     text: WIP
     variant: caution
 ---
+
+
+## API Permission Map
+
+- `onDragDrop`: `"event:drag-drop"`
+- `onDragEnter`: `"event:drag-enter"`
+- `onDragLeave`: `"event:drag-leave"`
+- `onDragOver`: `"event:drag-over"`
+- `onWindowBlur`: `"event:window-blur"`
+- `onWindowCloseRequested`: `"event:window-close-requested"`
+- `onWindowFocus`: `"event:window-focus"`

docs/src/content/docs/developer/API/fetch.mdx

@@ -1,5 +1,5 @@
 ---
-title: Fetch API
+title: Fetch
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/fs.mdx

@@ -1,5 +1,5 @@
 ---
-title: File System API
+title: File System
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/log.mdx

@@ -1,5 +1,5 @@
 ---
-title: Log API
+title: Log
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/network.mdx

@@ -1,5 +1,5 @@
 ---
-title: Network API
+title: Network
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/notification.mdx

@@ -1,5 +1,5 @@
 ---
-title: Notification API
+title: Notification
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/open.mdx

@@ -1,5 +1,5 @@
 ---
-title: Open API
+title: Open
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/os.mdx

@@ -1,5 +1,5 @@
 ---
-title: OS API
+title: OS
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/path.mdx

@@ -1,5 +1,5 @@
 ---
-title: Path API
+title: Path
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/shell.mdx

@@ -1,5 +1,5 @@
 ---
-title: Shell API
+title: Shell
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/sysinfo.mdx

@@ -1,5 +1,5 @@
 ---
-title: System Info API
+title: System Info
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/system.mdx

@@ -1,5 +1,5 @@
 ---
-title: System API
+title: System
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/toast.mdx

@@ -1,5 +1,5 @@
 ---
-title: Toast API
+title: Toast
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/ui.mdx

@@ -1,5 +1,5 @@
 ---
-title: UI API
+title: UI
 sidebar:
   badge:
     text: WIP

docs/src/content/docs/developer/API/updownload.mdx

@@ -1,5 +1,6 @@
 ---
-title: Updownload API
+title: Updownload
+description: Download and upload files
 sidebar:
   badge:
     text: WIP

packages/api/src/ui/client.ts

@@ -181,11 +181,32 @@ export type DragOverPayload = {
 }
 
 export interface IEvent {
+	/**
+	 * Get files dropped on the window
+	 */
 	onDragDrop: (callback: (payload: DragDropPayload) => void) => void
+	/**
+	 * Listen to drag enter event, when mouse drag enters the window
+	 */
 	onDragEnter: (callback: (payload: DragEnterPayload) => void) => void
+	/**
+	 * Listen to drag leave event, when mouse drag leaves the window
+	 */
 	onDragLeave: (callback: () => void) => void
+	/**
+	 * Get the position of the dragged item
+	 */
 	onDragOver: (callback: (payload: DragOverPayload) => void) => void
+	/**
+	 * Listen to window blur (defocus) event
+	 */
 	onWindowBlur: (callback: () => void) => void
+	/**
+	 * Listen to window close request event
+	 */
 	onWindowCloseRequested: (callback: () => void) => void
+	/**
+	 * Listen to window on focus event
+	 */
 	onWindowFocus: (callback: () => void) => void
 }

packages/api/src/ui/server/event.ts

@@ -18,52 +18,65 @@ export interface IEventServer {
 	eventOnWindowFocus: IEvent["onWindowFocus"]
 }
 
-function checkPermission(permissions: EventPermission[], permission: EventPermission) {
-	if (!permissions.includes(permission)) {
-		throw new Error(`${permission} permission is required`)
+function checkPermission(
+	userPermissions: EventPermission[],
+	requiredPermissions: EventPermission[]
+) {
+	if (!requiredPermissions.some((p) => userPermissions.includes(p))) {
+		throw new Error(`${requiredPermissions.join(" or ")} permission is required`)
 	}
 }
 
+export const eventRequiredPermissionMap: Record<keyof IEventServer, EventPermission[]> = {
+	eventOnDragDrop: ["event:drag-drop"],
+	eventOnDragEnter: ["event:drag-enter"],
+	eventOnDragLeave: ["event:drag-leave"],
+	eventOnDragOver: ["event:drag-over"],
+	eventOnWindowBlur: ["event:window-blur"],
+	eventOnWindowCloseRequested: ["event:window-close-requested"],
+	eventOnWindowFocus: ["event:window-focus"]
+}
+
 export function constructEventApi(permissions: EventPermission[]): IEventServer {
 	return {
 		eventOnDragDrop: (callback) => {
-			checkPermission(permissions, "event:drag-drop")
+			checkPermission(permissions, eventRequiredPermissionMap.eventOnDragDrop)
 			listen<DragDropPayload>(TauriEvent.DRAG_DROP, (e) => {
 				callback(e.payload)
 			})
 		},
 		eventOnDragEnter: (callback) => {
-			checkPermission(permissions, "event:drag-enter")
+			checkPermission(permissions, eventRequiredPermissionMap.eventOnDragEnter)
 			listen<DragEnterPayload>(TauriEvent.DRAG_ENTER, (e) => {
 				callback(e.payload)
 			})
 		},
 		eventOnDragLeave: (callback) => {
-			checkPermission(permissions, "event:drag-leave")
+			checkPermission(permissions, eventRequiredPermissionMap.eventOnDragLeave)
 			listen<null>(TauriEvent.DRAG_LEAVE, (e) => {
 				callback()
 			})
 		},
 		eventOnDragOver: (callback) => {
-			checkPermission(permissions, "event:drag-over")
+			checkPermission(permissions, eventRequiredPermissionMap.eventOnDragOver)
 			listen<DragOverPayload>(TauriEvent.DRAG_OVER, (e) => {
 				callback(e.payload)
 			})
 		},
 		eventOnWindowBlur: (callback) => {
-			checkPermission(permissions, "event:window-blur")
+			checkPermission(permissions, eventRequiredPermissionMap.eventOnWindowBlur)
 			listen<null>(TauriEvent.WINDOW_BLUR, (e) => {
 				callback()
 			})
 		},
 		eventOnWindowCloseRequested: (callback) => {
-			checkPermission(permissions, "event:window-close-requested")
+			checkPermission(permissions, eventRequiredPermissionMap.eventOnWindowCloseRequested)
 			listen<null>(TauriEvent.WINDOW_CLOSE_REQUESTED, (e) => {
 				callback()
 			})
 		},
 		eventOnWindowFocus: (callback) => {
-			checkPermission(permissions, "event:window-focus")
+			checkPermission(permissions, eventRequiredPermissionMap.eventOnWindowFocus)
 			listen<null>(TauriEvent.WINDOW_FOCUS, (e) => {
 				callback()
 			})