# amiaoapp/piclite architecture

> Architecture diagram of the GitHub repository amiaoapp/piclite, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/amiaoapp/piclite
- Repository: https://github.com/amiaoapp/piclite

## Overview

PicLite is a local-first image and GIF compression workbench, available in browser and as a Tauri desktop app. Users import images, configure or accept automatic format/quality choices, compare and adjust results, then export or use optional watermarking and image-host uploads. The desktop app adds floating results, native file operations, folder monitoring, clipboard workflows, and a local gallery. The large workbench module appears to own several documented capabilities; unsampled feature internals are represented at that module rather than inferred as separate implementations.

Main entry points: [`app/piclite-app.tsx`](https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx) (Compression workbench), [`desktop/clop-desktop-app.tsx`](https://github.com/amiaoapp/piclite/blob/main/desktop/clop-desktop-app.tsx) (Floating results), [`desktop/renderer.tsx`](https://github.com/amiaoapp/piclite/blob/main/desktop/renderer.tsx) (Desktop renderer), [`desktop/tauri-bridge.ts`](https://github.com/amiaoapp/piclite/blob/main/desktop/tauri-bridge.ts) (Tauri bridge)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workbench["Image workbench"]
  node_web_entry["Web entry<br/>[page.tsx]"]
  node_workbench_app["Compression workbench<br/>[piclite-app.tsx]"]
  node_compression_policy["Compression policy"]
  node_gallery[("Local gallery<br/>[piclite-app.tsx]")]
  node_watermark["Watermark tools<br/>[piclite-app.tsx]"]
  node_upload["Image-host upload<br/>[piclite-app.tsx]"]
  node_plugins_rename["Rename plugin<br/>[piclite-app.tsx]"]
end

subgraph group_desktop["Desktop experience"]
  node_renderer["Desktop renderer<br/>[renderer.tsx]"]
  node_floating["Floating results"]
  node_watcher_runtime["Watch runtime<br/>[watcher-runtime.ts]"]
  node_desktop_icons["Desktop icons<br/>[clop-icons.tsx]"]
  node_feedback["Operation feedback"]
end

subgraph group_native["Native services"]
  node_native_bridge["Tauri bridge<br/>[tauri-bridge.ts]"]
  node_native_backend["Native commands<br/>[lib.rs]"]
end

subgraph group_state["Settings and state"]
  node_desktop_settings[("Desktop settings<br/>[clop-store.ts]")]
  node_desktop_types["Desktop contracts<br/>[clop-types.ts]"]
end

node_user(("Image user"))

node_user -->|"opens workbench"| node_web_entry
node_web_entry -->|"renders"| node_workbench_app
node_user -.->|"uses desktop app"| node_renderer
node_renderer -->|"mounts"| node_workbench_app
node_renderer -->|"loads"| node_native_bridge
node_workbench_app -->|"uses policy"| node_compression_policy
node_workbench_app -->|"stores and lists"| node_gallery
node_workbench_app -->|"provides"| node_watermark
node_workbench_app -->|"provides"| node_upload
node_workbench_app -->|"hosts"| node_plugins_rename
node_renderer -->|"starts"| node_watcher_runtime
node_watcher_runtime -->|"loads settings"| node_desktop_settings
node_watcher_runtime -->|"starts or stops"| node_native_bridge
node_native_bridge -->|"invokes commands"| node_native_backend
node_floating -->|"loads and saves"| node_desktop_settings
node_floating -->|"renders"| node_desktop_icons
node_floating -.->|"uses native actions"| node_native_bridge
node_desktop_settings -->|"uses types"| node_desktop_types
node_floating -->|"uses notices"| node_feedback

click node_renderer "https://github.com/amiaoapp/piclite/blob/main/desktop/renderer.tsx"
click node_web_entry "https://github.com/amiaoapp/piclite/blob/main/app/page.tsx"
click node_workbench_app "https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx"
click node_compression_policy "https://github.com/amiaoapp/piclite/blob/main/app/compression-policy.ts"
click node_gallery "https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx"
click node_watermark "https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx"
click node_upload "https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx"
click node_plugins_rename "https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx"
click node_floating "https://github.com/amiaoapp/piclite/blob/main/desktop/clop-desktop-app.tsx"
click node_desktop_settings "https://github.com/amiaoapp/piclite/blob/main/desktop/clop-store.ts"
click node_desktop_types "https://github.com/amiaoapp/piclite/blob/main/desktop/clop-types.ts"
click node_watcher_runtime "https://github.com/amiaoapp/piclite/blob/main/desktop/watcher-runtime.ts"
click node_native_bridge "https://github.com/amiaoapp/piclite/blob/main/desktop/tauri-bridge.ts"
click node_native_backend "https://github.com/amiaoapp/piclite/blob/main/src-tauri/src/lib.rs"
click node_desktop_icons "https://github.com/amiaoapp/piclite/blob/main/desktop/clop-icons.tsx"
click node_feedback "https://github.com/amiaoapp/piclite/blob/main/desktop/operation-feedback.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_web_entry,node_workbench_app,node_compression_policy,node_gallery,node_watermark,node_upload,node_plugins_rename,node_user toneBlue
class node_renderer,node_floating,node_watcher_runtime,node_desktop_icons,node_feedback toneAmber
class node_native_bridge,node_native_backend toneMint
class node_desktop_settings,node_desktop_types toneRose
```

## Components

### Image workbench

- [Web entry](https://github.com/amiaoapp/piclite/blob/main/app/page.tsx): `app/page.tsx`
- [Compression workbench](https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx): `app/piclite-app.tsx`
- [Compression policy](https://github.com/amiaoapp/piclite/blob/main/app/compression-policy.ts): `app/compression-policy.ts`
- [Local gallery](https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx): `app/piclite-app.tsx`
- [Watermark tools](https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx): `app/piclite-app.tsx`
- [Image-host upload](https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx): `app/piclite-app.tsx`
- [Rename plugin](https://github.com/amiaoapp/piclite/blob/main/app/piclite-app.tsx): `app/piclite-app.tsx`

### Desktop experience

- [Desktop renderer](https://github.com/amiaoapp/piclite/blob/main/desktop/renderer.tsx): `desktop/renderer.tsx`
- [Floating results](https://github.com/amiaoapp/piclite/blob/main/desktop/clop-desktop-app.tsx): `desktop/clop-desktop-app.tsx`
- [Watch runtime](https://github.com/amiaoapp/piclite/blob/main/desktop/watcher-runtime.ts): `desktop/watcher-runtime.ts`
- [Desktop icons](https://github.com/amiaoapp/piclite/blob/main/desktop/clop-icons.tsx): `desktop/clop-icons.tsx`
- [Operation feedback](https://github.com/amiaoapp/piclite/blob/main/desktop/operation-feedback.ts): `desktop/operation-feedback.ts`

### Native services

- [Tauri bridge](https://github.com/amiaoapp/piclite/blob/main/desktop/tauri-bridge.ts): `desktop/tauri-bridge.ts`
- [Native commands](https://github.com/amiaoapp/piclite/blob/main/src-tauri/src/lib.rs): `src-tauri/src/lib.rs`

### Settings and state

- [Desktop settings](https://github.com/amiaoapp/piclite/blob/main/desktop/clop-store.ts): `desktop/clop-store.ts`
- [Desktop contracts](https://github.com/amiaoapp/piclite/blob/main/desktop/clop-types.ts): `desktop/clop-types.ts`

### Other components

- **Image user**

## Connections

- Image user → Web entry: opens workbench (evidence: `app/page.tsx`)
- Web entry → Compression workbench: renders (evidence: `app/page.tsx`)
- Image user → Desktop renderer: uses desktop app (evidence: `README.md`)
- Desktop renderer → Compression workbench: mounts (evidence: `desktop/renderer.tsx`)
- Desktop renderer → Tauri bridge: loads (evidence: `desktop/renderer.tsx`)
- Compression workbench → Compression policy: uses policy (evidence: `app/piclite-app.tsx`)
- Compression workbench → Local gallery: stores and lists (evidence: `app/piclite-app.tsx`)
- Compression workbench → Watermark tools: provides (evidence: `README.md`)
- Compression workbench → Image-host upload: provides (evidence: `README.md`)
- Compression workbench → Rename plugin: hosts (evidence: `README.md`)
- Desktop renderer → Watch runtime: starts (evidence: `desktop/renderer.tsx`)
- Watch runtime → Desktop settings: loads settings (evidence: `desktop/watcher-runtime.ts`)
- Watch runtime → Tauri bridge: starts or stops (evidence: `desktop/watcher-runtime.ts`)
- Tauri bridge → Native commands: invokes commands (evidence: `desktop/tauri-bridge.ts`)
- Floating results → Desktop settings: loads and saves (evidence: `desktop/clop-desktop-app.tsx`)
- Floating results → Desktop icons: renders (evidence: `desktop/clop-desktop-app.tsx`)
- Floating results → Tauri bridge: uses native actions
- Desktop settings → Desktop contracts: uses types (evidence: `desktop/clop-store.ts`)
- Floating results → Operation feedback: uses notices (evidence: `desktop/clop-desktop-app.tsx`)