SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

docs: sync all 15 readmes to the rust-era reality

Browse source 
The readmes still described the retired TypeScript editor as the shipping
product: apps/* + pen-* directory tree, Electron/TanStack/Zustand/Nitro tech
stack, pen-mcp / pen-engine / pen-react references, and a 'the Rust rewrite
is what's next' framing. Rewrite the stale sections across README.md and the
14 translations: current crates/ + packages/op-web-sdk* + vendor/ tree, Rust
tech stack, op-mcp transports, native-binary desktop claims, 'TS retired at
v0.7.5' framing, and submodule-accurate cloning docs (sync before update).
This commit is contained in:
Kayshen-X 2026-07-03 22:18:28 +08:00
parent ccc0297261
commit 8daf3f9857
15 changed files with 709 additions and 747 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
README.de.md
View file

@ -80,7 +80,7 @@ Ein-Klick-Installation in Claude Code, Codex, Gemini, OpenCode, Kiro oder Copilo
### 🖥️ Läuft überall
Web-App + native Desktop-Anwendung auf macOS, Windows und Linux über Electron. Auto-Updates über GitHub Releases. `.op`-Dateizuordnung — Doppelklick zum Öffnen.
Web-App + native Desktop-Anwendung auf macOS, Windows und Linux — ein Rust-Kern, eine einzelne eigenständige Binärdatei, keine Browser-Engine. `.op`-Dateizuordnung — Doppelklick zum Öffnen.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP-Server**
- Eingebauter MCP-Server — Ein-Klick-Installation in Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- Automatische Node.js-Erkennung — falls nicht installiert, automatischer Fallback auf HTTP-Transport und automatischer Start des MCP-HTTP-Servers
- Eingebauter MCP-Server (`op-mcp`-Crate) — Ein-Klick-Installation in Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- Kein Node.js erforderlich — stdio-Transport über die Desktop-Binärdatei (`--mcp <path>`), plus ein Live-HTTP-Endpunkt (`127.0.0.1:<port>/mcp`) der laufenden App
- Design-Automatisierung vom Terminal aus: `.op`-Dateien über jeden MCP-kompatiblen Agenten lesen, erstellen und bearbeiten
- **Mehrstufiger Design-Workflow** — `design_skeleton` → `design_content` → `design_refine` für hochwertigere mehrteilige Designs
- **Segmentierter Prompt-Abruf** — laden Sie nur das benötigte Design-Wissen (Schema, Layout, Rollen, Icons, Planung usw.)
@ -275,31 +275,32 @@ Unterstützt drei Eingabemethoden: Inline-String, `@filepath` (aus Datei lesen)
**Desktop-App**
- Natives macOS, Windows und Linux über Electron
- Natives macOS, Windows und Linux — eine einzelne eigenständige Binärdatei (winit + GPU Skia, kein Electron)
- `.op`-Dateizuordnung — Doppelklick zum Öffnen, Einzelinstanzsperre
- Automatische Aktualisierung über GitHub Releases
- Update-Prüfung im Hintergrund über GitHub Releases
- Natives Anwendungsmenü mit „Speichern unter“, „Zuletzt verwendete öffnen“ und einem Dialog zu ungespeicherten Änderungen beim Schließen
- Persistenz der zuletzt verwendeten Dateien
## Technologie-Stack
| | |
| --------------- | -------------------------------------------------------------------------------- |
| **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Canvas** | CanvasKit/Skia (WASM, GPU-beschleunigt) |
| **State** | Zustand v5 |
| **Server** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — Terminal-Steuerung, Batch-Design-DSL |
| **KI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Laufzeit** | Bun · Vite 7 |
| **Dateiformat** | `.op` — JSON-basiert, menschenlesbar, Git-freundlich |
| | |
| ---------------- | -------------------------------------------------------------------------------------------- |
| **Kern** | Rust-Workspace (`crates/`) — Editor-Zustand, Widgets, Hosts, MCP, KI, Codegen |
| **Rendering** | GPU Skia überall — `skia-safe` (GL) nativ, CanvasKit (WASM/WebGL2) im Browser |
| **UI-Toolkit** | jian — vendorisiertes Rust-Widget-/Render-/Event-Toolkit (`vendor/jian`) |
| **Fenstersystem**| winit (vendorisierter `casement`-Fork) |
| **Desktop** | Native Binärdatei `openpencil-desktop` — keine Browser-Engine |
| **Web-SDK** | `op-web-sdk` + React-19-/Vue-3-Adapter — schreibgeschützter `.op`-Viewer (TypeScript) |
| **CLI** | `op` — Terminal-Steuerung, Batch-Design-DSL |
| **KI** | Integrierte Rust-Agentenlaufzeit · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (Web-SDK) |
| **Dateiformat** | `.op` — JSON-basiert, menschenlesbar, Git-freundlich |
## Warum Rust
OpenPencil wird von Grund auf in **Rust** neu geschrieben ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Die TypeScript + Electron-Version ist das, was heute ausgeliefert wird; die Rust-Neufassung ist der nächste Schritt — ein einzelner nativer Kern, der dramatisch kleiner und schneller ist und aus einer einzigen Codebasis auf mehr Plattformen läuft.
OpenPencil wurde von Grund auf in **Rust** neu geschrieben ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Die Neufassung ist abgeschlossen — der TypeScript + Electron-Editor wurde mit `v0.7.5` eingestellt, und der Rust-Workspace in diesem Repository ist das Produkt: ein einzelner nativer Kern, der dramatisch kleiner und schneller ist und aus einer einzigen Codebasis auf mehr Plattformen läuft.
| | TypeScript + Electron (heute) | Rust (die Neufassung) |
| | TypeScript + Electron (eingestellt, `v0.7.5`) | Rust (heute) |
| -------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------- |
| **Desktop-Laufzeit** | Electron — bündelt Chromium + Node.js | Natives Fenster (`winit` + GPU Skia), keine Browser-Engine |
| **Desktop-Größe** | Vollständige Chromium-Laufzeit pro Installation | Einzelne eigenständige Binärdatei — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil wird von Grund auf in **Rust** neu geschrieben ([#129](https://github
- **Native Barrierefreiheit** — AccessKit auf macOS, Windows und Linux sowie ein DOM-Spiegel im Web, anstatt sich auf den a11y-Baum eines Browsers zu stützen.
- **Ein typgeprüfter Workspace** — der MCP-Host, CLI, AI-Anbieter, Codegenerierung, Figma-Import und Git-Integration leben alle in einem einzigen Rust-Workspace, mit `cargo-deny`-Supply-Chain-Kontrolle in der CI.
> **Status:** die Rust-Shell befindet sich in aktiver Entwicklung (siehe Roadmap unten). Bis sie Funktionsparität für `v0.8.0` erreicht, sind die installierbaren Downloads oben der TypeScript + Electron-Build.
> **Status:** der TypeScript-Editor wurde mit `v0.7.5` eingestellt und existiert nur noch in der Git-Historie; dieses Repository ist der Rust-Workspace. Das `v0.8.0`-Rust-Release befindet sich in aktiver Entwicklung (siehe Roadmap unten).
## Projektstruktur
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start Web-App
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia-Engine — Zeichnen, Sync, Layout
│ │ │ ├── components/ React-UI — Editor, Panels, gemeinsame Dialoge, Icons
│ │ │ ├── services/ai/ KI-Chat, Orchestrierer, Designgenerierung, Streaming
│ │ │ ├── stores/ Zustand — Canvas, Dokument, Seiten, Verlauf, KI
│ │ │ ├── mcp/ MCP-Server-Tools für externe CLI-Integration
│ │ │ ├── hooks/ Tastaturkürzel, Datei-Drop, Figma-Paste
│ │ │ └── uikit/ Wiederverwendbares Komponenten-Kit-System
│ │ └── server/
│ │ ├── api/ai/ Nitro-API — Streaming-Chat, Generierung, Validierung
│ │ └── utils/ Claude CLI, OpenCode, Codex, Copilot-Wrapper
│ ├── desktop/ Electron-Desktop-App
│ │ ├── main.ts Fenster, Nitro-Fork, natives Menü, Auto-Updater
│ │ ├── ipc-handlers.ts Native Dateidialoge, Theme-Sync, Einstellungen-IPC
│ │ └── preload.ts IPC-Brücke
│ └── cli/ CLI-Tool — `op`-Befehl
│ ├── src/commands/ Design-, Dokument-, Export-, Import-, Knoten-, Seiten-, Variablen-Befehle
│ ├── connection.ts WebSocket-Verbindung zur laufenden App
│ └── launcher.ts Automatische Erkennung und Start der Desktop-App oder des Webservers
├── packages/
│ ├── pen-types/ Typdefinitionen für das PenDocument-Modell
│ ├── pen-core/ Dokumentbaum-Operationen, Layout-Engine, Variablen
│ ├── pen-codegen/ Codegeneratoren (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Figma-.fig-Datei-Parser und -Konverter
│ ├── pen-renderer/ Eigenständiger CanvasKit/Skia-Renderer
│ ├── pen-sdk/ Umbrella-SDK (re-exportiert alle Pakete)
│ ├── pen-ai-skills/ KI-Prompt-Skill-Engine (phasengesteuertes Prompt-Laden)
│ └── agent/ KI-Agenten-SDK (Vercel AI SDK, Multi-Anbieter, Agententeams)
└── .githooks/ Pre-Commit-Versionssynchronisierung vom Branch-Namen
├── crates/ Rust-Workspace — das Produkt
│ ├── op-editor-core/ Kanonischer `.op`-Zustand (PenDocument) + EditorCommand + Designvariablen
│ ├── op-editor-ui/ Plattformfreie Widgets + RenderBackend-Fassade (wasm32-clean)
│ ├── op-editor-host-core/ Transportfreie Host-Zustandsmaschinen, gemeinsam für alle Hosts
│ ├── op-host-native/ Native Host-Bibliothek — winit + skia-safe GL (Desktop + Mobile)
│ ├── op-host-web/ Browser-Bundle — wasm32-cdylib, CanvasKit-Renderer
│ ├── op-host-desktop/ Desktop-Binärdatei `openpencil-desktop`; auch der `--serve-web`-Daemon
│ ├── op-host-services/ Headless serve-web-/MCP-Daemon-Bibliothek
│ ├── op-host-web-server/ Schlanke GL-freie Webserver-Binärdatei
│ ├── op-cli/ CLI-Tool — `op`-Befehl
│ ├── op-mcp/ MCP-Server — Tools, Batch-Design, mehrstufiger Workflow
│ ├── op-ai/ KI-Anbieter, Chat-Laufzeit, Streaming
│ ├── op-ai-skills/ KI-Prompt-Skill-Engine (phasengesteuertes Prompt-Laden)
│ ├── op-orchestrator/ Orchestrierung paralleler Agententeams
│ ├── op-codegen/ Codegeneratoren (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Figma-.fig-Datei-Parser und -Konverter
│ ├── op-git/ Git-Integration — Klonen, Branches, Push/Pull, Merge
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web-SDK-Workspace (Bun)
│ ├── op-web-sdk/ Schreibgeschützte `.op`-Web-Viewer-SDK (umschließt das wasm-Bundle)
│ ├── op-web-sdk-react/ React-19-Adapter
│ └── op-web-sdk-vue/ Vue-3-Adapter
├── vendor/ Vendorisierte Subsysteme (Git-Submodule)
│ ├── jian/ Skia-Widget-/Render-/Event-Toolkit
│ ├── casement/ winit-Fork
│ └── agent/ Produktübergreifende Rust-Agentenlaufzeit (agent-rs)
└── .githooks/ Pre-Commit-Versionssynchronisierung vom Branch-Namen
```
## Tastaturkürzel

98
README.es.md
View file

@ -80,7 +80,7 @@ Los archivos `.op` son JSON — legibles por humanos, compatibles con Git, compa
### 🖥️ Funciona en Todas Partes
Aplicación web + escritorio nativo en macOS, Windows y Linux mediante Electron. Actualizaciones automáticas desde GitHub Releases. Asociación de archivos `.op` — doble clic para abrir.
Aplicación web + escritorio nativo en macOS, Windows y Linux — un único núcleo en Rust, un solo binario autocontenido, sin motor de navegador. Asociación de archivos `.op` — doble clic para abrir.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**Servidor MCP**
- Servidor MCP integrado — instalación con un clic en Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- Detección automática de Node.js — si no está instalado, recurre automáticamente al transporte HTTP e inicia el servidor MCP HTTP
- Servidor MCP integrado (crate `op-mcp`) — instalación con un clic en Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- No requiere Node.js — transporte stdio a través del binario de escritorio (`--mcp <path>`), además de un endpoint HTTP en vivo (`127.0.0.1:<port>/mcp`) desde la app en ejecución
- Automatización de diseño desde la terminal: leer, crear y modificar archivos `.op` a través de cualquier agente compatible con MCP
- **Flujo de diseño por capas** — `design_skeleton` → `design_content` → `design_refine` para diseños multisección de mayor fidelidad
- **Recuperación segmentada de prompts** — carga solo el conocimiento de diseño que necesitas (schema, layout, roles, icons, planning, etc.)
@ -275,31 +275,32 @@ Soporta tres métodos de entrada: cadena inline, `@filepath` (leer desde archivo
**Aplicación de Escritorio**
- Compatible de forma nativa con macOS, Windows y Linux mediante Electron
- Nativo en macOS, Windows y Linux — un único binario autocontenido (winit + GPU Skia, sin Electron)
- Asociación de archivos `.op` — doble clic para abrir, bloqueo de instancia única
- Actualización automática desde GitHub Releases
- Verificación de actualizaciones en segundo plano contra GitHub Releases
- Menú de aplicación nativo con Guardar como, Abrir recientes y un diálogo de cambios sin guardar al cerrar
- Persistencia de archivos recientes
## Stack Tecnológico
| | |
| ---------------------- | -------------------------------------------------------------------------------- |
| **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Lienzo** | CanvasKit/Skia (WASM, acelerado por GPU) |
| **Estado** | Zustand v5 |
| **Servidor** | Nitro |
| **Escritorio** | Electron 35 |
| **CLI** | `op` — control desde terminal, DSL de diseño por lotes |
| **IA** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Formato de archivo** | `.op` — basado en JSON, legible por humanos, compatible con Git |
| | |
| ---------------------- | -------------------------------------------------------------------------------------------------- |
| **Núcleo** | Workspace Rust (`crates/`) — estado del editor, widgets, hosts, MCP, IA, codegen |
| **Renderizado** | GPU Skia en todas partes — `skia-safe` (GL) en nativo, CanvasKit (WASM/WebGL2) en el navegador |
| **Kit de UI** | jian — kit de widgets/render/eventos en Rust incluido como vendor (`vendor/jian`) |
| **Ventanas** | winit (fork `casement` incluido como vendor) |
| **Escritorio** | Binario nativo `openpencil-desktop` — sin motor de navegador |
| **SDK web** | `op-web-sdk` + adaptadores React 19 / Vue 3 — visor `.op` de solo lectura (TypeScript) |
| **CLI** | `op` — control desde terminal, DSL de diseño por lotes |
| **IA** | Runtime de agente Rust integrado · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (SDK web) |
| **Formato de archivo** | `.op` — basado en JSON, legible por humanos, compatible con Git |
## Por Qué Rust
OpenPencil está siendo reescrito desde cero en **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). La versión TypeScript + Electron es lo que se distribuye hoy; la reescritura en Rust es lo que viene a continuación: un único núcleo nativo considerablemente más pequeño y rápido, que funciona en más plataformas desde una sola base de código.
OpenPencil fue reescrito desde cero en **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). La reescritura está completa — el editor TypeScript + Electron se retiró en `v0.7.5`, y el workspace Rust de este repositorio es el producto: un único núcleo nativo considerablemente más pequeño y rápido, que funciona en más plataformas desde una sola base de código.
| | TypeScript + Electron (hoy) | Rust (la reescritura) |
| | TypeScript + Electron (retirado, `v0.7.5`) | Rust (hoy) |
| ------------------------ | --------------------------------------------------- | --------------------------------------------------------------------------- |
| **Entorno de escritorio** | Electron — incluye Chromium + Node.js | Ventana nativa (`winit` + GPU Skia), sin motor de navegador |
| **Tamaño en escritorio** | Runtime completo de Chromium por instalación | Binario único autocontenido — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil está siendo reescrito desde cero en **Rust** ([#129](https://github.
- **Accesibilidad nativa** — AccessKit en macOS, Windows y Linux, más un espejo DOM en web, en lugar de depender del árbol de accesibilidad del navegador.
- **Un workspace con tipado estricto** — el host MCP, CLI, proveedores de AI, generación de código, importación de Figma y la integración con Git conviven en un único workspace Rust, con `cargo-deny` vigilando la cadena de suministro en CI.
> **Estado:** el shell en Rust está en desarrollo activo (consulta la Hoja de Ruta más abajo). Hasta que alcance paridad de funcionalidades para `v0.8.0`, las descargas instalables anteriores corresponden a la build TypeScript + Electron.
> **Estado:** el editor TypeScript se retiró en `v0.7.5` y solo vive en el historial de git; este repositorio es el workspace Rust. La versión `v0.8.0` de Rust está en desarrollo activo (consulta la Hoja de Ruta más abajo).
## Estructura del Proyecto
```text
openpencil/
├── apps/
│ ├── web/ Aplicación web TanStack Start
│ │ ├── src/
│ │ │ ├── canvas/ Motor CanvasKit/Skia — dibujo, sincronización, diseño
│ │ │ ├── components/ Interfaz React — editor, paneles, diálogos compartidos, iconos
│ │ │ ├── services/ai/ Chat de IA, orquestador, generación de diseño, transmisión
│ │ │ ├── stores/ Zustand — lienzo, documento, páginas, historial, IA
│ │ │ ├── mcp/ Herramientas del servidor MCP para integración con CLI externas
│ │ │ ├── hooks/ Atajos de teclado, soltar archivos, pegado de Figma
│ │ │ └── uikit/ Sistema de kit de componentes reutilizables
│ │ └── server/
│ │ ├── api/ai/ API Nitro — chat en streaming, generación, validación
│ │ └── utils/ Wrappers de Claude CLI, OpenCode, Codex, Copilot
│ ├── desktop/ Aplicación de escritorio Electron
│ │ ├── main.ts Ventana, fork Nitro, menú nativo, actualizador automático
│ │ ├── ipc-handlers.ts Diálogos de archivos nativos, sincronización de tema, preferencias IPC
│ │ └── preload.ts Puente IPC
│ └── cli/ Herramienta CLI — comando `op`
│ ├── src/commands/ Comandos de diseño, documento, exportación, importación, nodo, página, variable
│ ├── connection.ts Conexión WebSocket a la app en ejecución
│ └── launcher.ts Auto-detección e inicio de la app de escritorio o servidor web
├── packages/
│ ├── pen-types/ Definiciones de tipos para el modelo PenDocument
│ ├── pen-core/ Operaciones de árbol del documento, motor de diseño, variables
│ ├── pen-codegen/ Generadores de código (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Parser y conversor de archivos .fig de Figma
│ ├── pen-renderer/ Renderizador independiente CanvasKit/Skia
│ ├── pen-sdk/ SDK global (reexporta todos los paquetes)
│ ├── pen-ai-skills/ Motor de habilidades AI (carga de prompts por fases)
│ └── agent/ SDK de agente AI (Vercel AI SDK, multi-proveedor, equipos de agentes)
└── .githooks/ Sincronización de versión pre-commit desde nombre de rama
├── crates/ Workspace Rust — el producto
│ ├── op-editor-core/ Estado canónico del editor `.op` (PenDocument) + EditorCommand + variables de diseño
│ ├── op-editor-ui/ Widgets independientes de plataforma + fachada RenderBackend (compatible con wasm32)
│ ├── op-editor-host-core/ Máquinas de estado de host sin transporte, compartidas por todos los hosts
│ ├── op-host-native/ Lib de host nativo — winit + skia-safe GL (escritorio + móvil)
│ ├── op-host-web/ Bundle para navegador — cdylib wasm32, renderizador CanvasKit
│ ├── op-host-desktop/ Binario de escritorio `openpencil-desktop`; también el daemon `--serve-web`
│ ├── op-host-services/ Lib del daemon headless serve-web / MCP
│ ├── op-host-web-server/ Binario ligero de servidor web sin GL
│ ├── op-cli/ Herramienta CLI — comando `op`
│ ├── op-mcp/ Servidor MCP — herramientas, diseño por lotes, flujo por capas
│ ├── op-ai/ Proveedores de IA, runtime de chat, transmisión
│ ├── op-ai-skills/ Motor de habilidades de IA (carga de prompts por fases)
│ ├── op-orchestrator/ Orquestación de equipos de agentes concurrentes
│ ├── op-codegen/ Generadores de código (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Parser y conversor de archivos .fig de Figma
│ ├── op-git/ Integración con Git — clonar, ramas, push/pull, fusión
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Workspace del SDK web (Bun)
│ ├── op-web-sdk/ SDK del visor web `.op` de solo lectura (envuelve el bundle wasm)
│ ├── op-web-sdk-react/ Adaptador para React 19
│ └── op-web-sdk-vue/ Adaptador para Vue 3
├── vendor/ Subsistemas incluidos como vendor (submódulos git)
│ ├── jian/ Kit de widgets/render/eventos Skia
│ ├── casement/ Fork de winit
│ └── agent/ Runtime de agente Rust multi-producto (agent-rs)
└── .githooks/ Sincronización de versión pre-commit desde nombre de rama
```
## Atajos de Teclado

98
README.fr.md
View file

@ -80,7 +80,7 @@ Les fichiers `.op` sont du JSON — lisibles par l'humain, compatibles Git, comp
### 🖥️ Fonctionne partout
Application web + bureau natif sur macOS, Windows et Linux via Electron. Mises à jour automatiques depuis GitHub Releases. Association de fichiers `.op` — double-cliquez pour ouvrir.
Application web + bureau natif sur macOS, Windows et Linux — un seul cœur Rust, un binaire unique autonome, sans moteur de navigateur. Association de fichiers `.op` — double-cliquez pour ouvrir.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**Serveur MCP**
- Serveur MCP intégré — installation en un clic dans les CLI Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot
- Détection automatique de Node.js — si non installé, bascule vers le transport HTTP et démarre automatiquement le serveur MCP HTTP
- Serveur MCP intégré (crate `op-mcp`) — installation en un clic dans les CLI Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot
- Aucun besoin de Node.js — transport stdio via le binaire de bureau (`--mcp <path>`), plus un point de terminaison HTTP en direct (`127.0.0.1:<port>/mcp`) depuis l'application en cours d'exécution
- Automatisation du design depuis le terminal : lire, créer et modifier des fichiers `.op` via tout agent compatible MCP
- **Workflow de design en couches** — `design_skeleton` → `design_content` → `design_refine` pour des designs multi-sections de plus haute fidélité
- **Récupération segmentée des prompts** — chargez uniquement les connaissances de design nécessaires (schéma, layout, rôles, icônes, planification, etc.)
@ -275,31 +275,32 @@ Supporte trois méthodes d'entrée : chaîne en ligne, `@filepath` (lecture depu
**Application de bureau**
- macOS, Windows et Linux natifs via Electron
- macOS, Windows et Linux natifs — un binaire unique autonome (winit + GPU Skia, sans Electron)
- Association de fichiers `.op` — double-cliquez pour ouvrir, verrouillage d'instance unique
- Mise à jour automatique depuis GitHub Releases
- Vérification des mises à jour en arrière-plan auprès de GitHub Releases
- Menu d'application natif avec Enregistrer sous, Ouvrir les récents et une boîte de dialogue de modifications non enregistrées à la fermeture
- Persistance des fichiers récents
## Stack technique
| | |
| --------------------- | -------------------------------------------------------------------------------- |
| **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Canevas** | CanvasKit/Skia (WASM, accélération GPU) |
| **État** | Zustand v5 |
| **Serveur** | Nitro |
| **Bureau** | Electron 35 |
| **CLI** | `op` — contrôle depuis le terminal, DSL de design par lots |
| **IA** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Format de fichier** | `.op` — basé sur JSON, lisible par l'humain, compatible Git |
| | |
| --------------------- | ------------------------------------------------------------------------------------------- |
| **Cœur** | Workspace Rust (`crates/`) — état de l'éditeur, widgets, hôtes, MCP, IA, codegen |
| **Rendu** | GPU Skia partout — `skia-safe` (GL) en natif, CanvasKit (WASM/WebGL2) dans le navigateur |
| **Kit UI** | jian — kit d'outils Rust vendored pour widgets/rendu/événements (`vendor/jian`) |
| **Fenêtrage** | winit (fork vendored `casement`) |
| **Bureau** | Binaire natif `openpencil-desktop` — sans moteur de navigateur |
| **SDK web** | `op-web-sdk` + adaptateurs React 19 / Vue 3 — visualiseur `.op` en lecture seule (TypeScript) |
| **CLI** | `op` — contrôle depuis le terminal, DSL de design par lots |
| **IA** | Runtime d'agent Rust intégré · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (SDK web) |
| **Format de fichier** | `.op` — basé sur JSON, lisible par l'humain, compatible Git |
## Pourquoi Rust
OpenPencil est en cours de réécriture complète en **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). La version TypeScript + Electron est celle qui est distribuée aujourd'hui ; la réécriture en Rust est la prochaine étape — un cœur natif unique, nettement plus léger et plus rapide, fonctionnant sur davantage de plateformes à partir d'une seule base de code.
OpenPencil a été réécrit intégralement en **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). La réécriture est terminée — l'éditeur TypeScript + Electron a été retiré en `v0.7.5`, et le workspace Rust de ce dépôt est le produit : un cœur natif unique, nettement plus léger et plus rapide, fonctionnant sur davantage de plateformes à partir d'une seule base de code.
| | TypeScript + Electron (aujourd'hui) | Rust (la réécriture) |
| | TypeScript + Electron (retiré, `v0.7.5`) | Rust (aujourd'hui) |
| -------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------- |
| **Exécution bureau** | Electron — embarque Chromium + Node.js | Fenêtre native (`winit` + GPU Skia), sans moteur de navigateur |
| **Empreinte bureau** | Runtime Chromium complet par installation | Binaire unique autonome — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil est en cours de réécriture complète en **Rust** ([#129](https://gi
- **Accessibilité native** — AccessKit sur macOS, Windows et Linux, plus un miroir DOM sur le web, plutôt que de s'appuyer sur l'arbre a11y d'un navigateur.
- **Un workspace avec vérification de types** — l'hôte MCP, le CLI, les fournisseurs AI, la génération de code, l'import Figma et l'intégration Git résident tous dans un seul workspace Rust, avec filtrage de la chaîne d'approvisionnement par `cargo-deny` en CI.
> **Statut :** le shell Rust est en développement actif (voir la Feuille de route ci-dessous). Jusqu'à ce qu'il atteigne la parité de fonctionnalités pour `v0.8.0`, les téléchargements installables ci-dessus correspondent à la version TypeScript + Electron.
> **Statut :** l'éditeur TypeScript a été retiré en `v0.7.5` et ne subsiste que dans l'historique Git ; ce dépôt est le workspace Rust. La version Rust `v0.8.0` est en développement actif (voir la Feuille de route ci-dessous).
## Structure du projet
```text
openpencil/
├── apps/
│ ├── web/ Application web TanStack Start
│ │ ├── src/
│ │ │ ├── canvas/ Moteur CanvasKit/Skia — dessin, sync, mise en page
│ │ │ ├── components/ Interface React — éditeur, panneaux, boîtes de dialogue partagées, icônes
│ │ │ ├── services/ai/ Chat IA, orchestrateur, génération de design, streaming
│ │ │ ├── stores/ Zustand — canevas, document, pages, historique, IA
│ │ │ ├── mcp/ Outils serveur MCP pour l'intégration CLI externe
│ │ │ ├── hooks/ Raccourcis clavier, dépôt de fichiers, collage Figma
│ │ │ └── uikit/ Système de kits de composants réutilisables
│ │ └── server/
│ │ ├── api/ai/ API Nitro — chat en streaming, génération, validation
│ │ └── utils/ Enveloppes Claude CLI, OpenCode, Codex, Copilot
│ ├── desktop/ Application de bureau Electron
│ │ ├── main.ts Fenêtre, fork Nitro, menu natif, mise à jour automatique
│ │ ├── ipc-handlers.ts Dialogues fichiers natifs, sync thème, préférences IPC
│ │ └── preload.ts Pont IPC
│ └── cli/ Outil CLI — commande `op`
│ ├── src/commands/ Commandes design, document, export, import, nœud, page, variable
│ ├── connection.ts Connexion WebSocket à l'app en cours d'exécution
│ └── launcher.ts Détection automatique et lancement de l'app de bureau ou du serveur web
├── packages/
│ ├── pen-types/ Définitions de types pour le modèle PenDocument
│ ├── pen-core/ Opérations sur l'arbre du document, moteur de mise en page, variables
│ ├── pen-codegen/ Générateurs de code (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Parseur et convertisseur de fichiers Figma .fig
│ ├── pen-renderer/ Moteur de rendu CanvasKit/Skia autonome
│ ├── pen-sdk/ SDK parapluie (réexporte tous les packages)
│ ├── pen-ai-skills/ Moteur de compétences AI (chargement de prompts par phases)
│ └── agent/ SDK agent AI (Vercel AI SDK, multi-fournisseur, équipes d'agents)
└── .githooks/ Synchronisation de version pre-commit depuis le nom de branche
├── crates/ Workspace Rust — le produit
│ ├── op-editor-core/ État canonique de l'éditeur `.op` (PenDocument) + EditorCommand + variables de design
│ ├── op-editor-ui/ Widgets indépendants de la plateforme + façade RenderBackend (wasm32-clean)
│ ├── op-editor-host-core/ Machines à états d'hôte sans transport, partagées par tous les hôtes
│ ├── op-host-native/ Bibliothèque hôte native — winit + skia-safe GL (bureau + mobile)
│ ├── op-host-web/ Bundle navigateur — cdylib wasm32, rendu CanvasKit
│ ├── op-host-desktop/ Binaire de bureau `openpencil-desktop` ; aussi le daemon `--serve-web`
│ ├── op-host-services/ Bibliothèque daemon serve-web / MCP headless
│ ├── op-host-web-server/ Binaire web-server léger, sans GL
│ ├── op-cli/ Outil CLI — commande `op`
│ ├── op-mcp/ Serveur MCP — outils, design par lots, workflow en couches
│ ├── op-ai/ Fournisseurs IA, runtime de chat, streaming
│ ├── op-ai-skills/ Moteur de compétences de prompts IA (chargement piloté par phases)
│ ├── op-orchestrator/ Orchestration d'équipes d'agents concurrentes
│ ├── op-codegen/ Générateurs de code (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Parseur et convertisseur de fichiers Figma .fig
│ ├── op-git/ Intégration Git — clone, branche, push/pull, fusion
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Workspace SDK web (Bun)
│ ├── op-web-sdk/ SDK visualiseur web `.op` en lecture seule (enveloppe le bundle wasm)
│ ├── op-web-sdk-react/ Adaptateur React 19
│ └── op-web-sdk-vue/ Adaptateur Vue 3
├── vendor/ Sous-systèmes vendored (sous-modules git)
│ ├── jian/ Kit d'outils widgets/rendu/événements Skia
│ ├── casement/ Fork de winit
│ └── agent/ Runtime d'agent Rust transversal (agent-rs)
└── .githooks/ Synchronisation de version pre-commit depuis le nom de branche
```
## Raccourcis clavier

90
README.hi.md
View file

@ -80,7 +80,7 @@ Claude Code, Codex, Gemini, OpenCode, Kiro, या Copilot CLIs में वन
### 🖥️ हर जगह चलता है
वेब ऐप + Electron के ज़रिए macOS, Windows और Linux पर नेटिव डेस्कटॉप। GitHub Releases से ऑटो-अपडेट। `.op` फ़ाइल एसोसिएशन — डबल-क्लिक से खोलें।
वेब ऐप + macOS, Windows और Linux पर नेटिव डेस्कटॉप — एक Rust कोर, एक एकल स्व-निहित बाइनरी, कोई ब्राउज़र इंजन नहीं। `.op` फ़ाइल एसोसिएशन — डबल-क्लिक से खोलें।
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP सर्वर**
- बिल्ट-इन MCP सर्वर — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs में वन-क्लिक इंस्टॉल
- Node.js स्वचालित पहचान — यदि इंस्टॉल नहीं है तो HTTP ट्रांसपोर्ट पर स्वचालित फ़ॉलबैक और MCP HTTP सर्वर ऑटो-स्टार्ट
- बिल्ट-इन MCP सर्वर (`op-mcp` crate) — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs में वन-क्लिक इंस्टॉल
- Node.js की कोई आवश्यकता नहीं — डेस्कटॉप बाइनरी (`--mcp <path>`) के ज़रिए stdio ट्रांसपोर्ट, साथ ही चल रहे ऐप से एक लाइव HTTP एंडपॉइंट (`127.0.0.1:<port>/mcp`)
- टर्मिनल से डिज़ाइन ऑटोमेशन: किसी भी MCP-संगत एजेंट के ज़रिए `.op` फ़ाइलें पढ़ें, बनाएँ और संपादित करें
- **लेयर्ड डिज़ाइन वर्कफ़्लो** — उच्च-फ़िडेलिटी मल्टी-सेक्शन डिज़ाइन के लिए `design_skeleton` → `design_content` → `design_refine`
- **सेगमेंटेड प्रॉम्प्ट रिट्रीवल** — केवल आवश्यक डिज़ाइन ज्ञान लोड करें (schema, layout, roles, icons, planning, आदि)
@ -275,9 +275,9 @@ cat design.dsl | op design - # stdin से पाइप करें
**डेस्कटॉप ऐप**
- Electron के ज़रिए नेटिव macOS, Windows और Linux सपोर्ट
- नेटिव macOS, Windows और Linux सपोर्ट — एक एकल स्व-निहित बाइनरी (winit + GPU Skia, कोई Electron नहीं)
- `.op` फ़ाइल एसोसिएशन — डबल-क्लिक से खोलें, सिंगल-इंस्टेंस लॉक
- GitHub Releases से ऑटो-अपडेट
- GitHub Releases के विरुद्ध बैकग्राउंड में अपडेट जांच
- इस रूप में सहेजें, हाल के खोलें और बंद करते समय असहेजे परिवर्तनों के डायलॉग वाला नेटिव एप्लिकेशन मेनू
- हाल की फ़ाइलों का पर्सिस्टेंस
@ -285,21 +285,22 @@ cat design.dsl | op design - # stdin से पाइप करें
| | |
| ------------------ | -------------------------------------------------------------------------------- |
| **फ्रंटएंड** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **कैनवास** | CanvasKit/Skia (WASM, GPU-एक्सेलेरेटेड) |
| **स्टेट** | Zustand v5 |
| **सर्वर** | Nitro |
| **डेस्कटॉप** | Electron 35 |
| **कोर** | Rust वर्कस्पेस (`crates/`) — एडिटर स्टेट, विजेट्स, होस्ट्स, MCP, AI, codegen |
| **रेंडरिंग** | हर जगह GPU Skia — नेटिव पर `skia-safe` (GL), ब्राउज़र में CanvasKit (WASM/WebGL2) |
| **UI टूलकिट** | jian — वेंडर्ड Rust विजेट/रेंडर/इवेंट टूलकिट (`vendor/jian`) |
| **विंडोइंग** | winit (वेंडर्ड `casement` फ़ोर्क) |
| **डेस्कटॉप** | नेटिव बाइनरी `openpencil-desktop` — कोई ब्राउज़र इंजन नहीं |
| **वेब SDK** | `op-web-sdk` + React 19 / Vue 3 एडाप्टर — रीड-ओनली `.op` व्यूअर (TypeScript) |
| **CLI** | `op` — टर्मिनल नियंत्रण, बैच डिज़ाइन DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **रनटाइम** | Bun · Vite 7 |
| **AI** | बिल्ट-इन Rust एजेंट रनटाइम · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK) |
| **फ़ाइल फ़ॉर्मेट** | `.op` — JSON-आधारित, मानव-पठनीय, Git-फ्रेंडली |
## Rust क्यों
OpenPencil को पूरी तरह **Rust** में नए सिरे से लिखा जा रहा है ([#129](https://github.com/ZSeven-W/openpencil/issues/129))। TypeScript + Electron बिल्ड वह है जो आज उपलब्ध है; Rust रीराइट अगला कदम है — एक नेटिव कोर जो काफ़ी छोटा और तेज़ है, और एक ही कोडबेस से अधिक प्लेटफ़ॉर्म पर चलता है।
OpenPencil को पूरी तरह **Rust** में नए सिरे से लिखा गया है ([#129](https://github.com/ZSeven-W/openpencil/issues/129))। रीराइट पूरा हो चुका है — TypeScript + Electron एडिटर को `v0.7.5` पर रिटायर कर दिया गया, और इस रिपॉज़िटरी का Rust वर्कस्पेस अब स्वयं प्रोडक्ट है: एक नेटिव कोर जो काफ़ी छोटा और तेज़ है, और एक ही कोडबेस से अधिक प्लेटफ़ॉर्म पर चलता है।
| | TypeScript + Electron (आज) | Rust (रीराइट) |
| | TypeScript + Electron (रिटायर, `v0.7.5`) | Rust (आज) |
| ----------------------- | ----------------------------------------------- | -------------------------------------------------------------------- |
| **डेस्कटॉप रनटाइम** | Electron — Chromium + Node.js बंडल करता है | नेटिव विंडो (`winit` + GPU Skia), कोई ब्राउज़र इंजन नहीं |
| **डेस्कटॉप फ़ुटप्रिंट** | प्रति इंस्टॉल पूरा Chromium रनटाइम | एकल स्व-निहित बाइनरी — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil को पूरी तरह **Rust** में नए सिरे
- **नेटिव एक्सेसिबिलिटी** — macOS, Windows और Linux पर AccessKit, साथ ही वेब पर DOM मिरर — ब्राउज़र के a11y ट्री पर निर्भर रहने के बजाय।
- **एक टाइप-चेक्ड वर्कस्पेस** — MCP होस्ट, CLI, AI प्रदाता, कोड जनरेशन, Figma इम्पोर्ट और Git इंटीग्रेशन सभी एक ही Rust वर्कस्पेस में रहते हैं, CI में `cargo-deny` सप्लाई-चेन गेटिंग के साथ।
> **स्थिति:** Rust शेल सक्रिय विकास में है (नीचे रोडमैप देखें)। जब तक यह `v0.8.0` के लिए फ़ीचर पैरिटी तक नहीं पहुँचता, ऊपर दिए गए इंस्टॉलेबल डाउनलोड TypeScript + Electron बिल्ड हैं।
> **स्थिति:** TypeScript एडिटर को `v0.7.5` पर रिटायर कर दिया गया था और अब यह केवल git इतिहास में मौजूद है; यह रिपॉज़िटरी अब Rust वर्कस्पेस है। `v0.8.0` Rust रिलीज़ सक्रिय विकास में है (नीचे रोडमैप देखें)।
## प्रोजेक्ट संरचना
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start वेब ऐप
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia इंजन — ड्रॉइंग, सिंक, लेआउट
│ │ │ ├── components/ React UI — एडिटर, पैनल, शेयर्ड डायलॉग, आइकन
│ │ │ ├── services/ai/ AI चैट, ऑर्केस्ट्रेटर, डिज़ाइन जनरेशन, स्ट्रीमिंग
│ │ │ ├── stores/ Zustand — कैनवास, दस्तावेज़, पेज, हिस्ट्री, AI
│ │ │ ├── mcp/ बाहरी CLI इंटीग्रेशन के लिए MCP सर्वर टूल
│ │ │ ├── hooks/ कीबोर्ड शॉर्टकट, फ़ाइल ड्रॉप, Figma पेस्ट
│ │ │ └── uikit/ पुन: उपयोगी कम्पोनेंट किट सिस्टम
│ │ └── server/
│ │ ├── api/ai/ Nitro API — स्ट्रीमिंग चैट, जनरेशन, वैलिडेशन
│ │ └── utils/ Claude CLI, OpenCode, Codex, Copilot रैपर
│ ├── desktop/ Electron डेस्कटॉप ऐप
│ │ ├── main.ts विंडो, Nitro फ़ोर्क, नेटिव मेनू, ऑटो-अपडेटर
│ │ ├── ipc-handlers.ts नेटिव फ़ाइल डायलॉग, थीम सिंक, प्राथमिकताएँ IPC
│ │ └── preload.ts IPC ब्रिज
│ └── cli/ CLI टूल — `op` कमांड
│ ├── src/commands/ डिज़ाइन, दस्तावेज़, एक्सपोर्ट, इम्पोर्ट, नोड, पेज, वेरिएबल कमांड
│ ├── connection.ts चालू ऐप से WebSocket कनेक्शन
│ └── launcher.ts डेस्कटॉप ऐप या वेब सर्वर का स्वचालित पता लगाना और लॉन्च
├── packages/
│ ├── pen-types/ PenDocument मॉडल के लिए टाइप परिभाषाएँ
│ ├── pen-core/ दस्तावेज़ ट्री ऑपरेशन, लेआउट इंजन, वेरिएबल
│ ├── pen-codegen/ कोड जनरेटर (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Figma .fig फ़ाइल पार्सर और कनवर्टर
│ ├── pen-renderer/ स्टैंडअलोन CanvasKit/Skia रेंडरर
│ ├── pen-sdk/ अम्ब्रेला SDK (सभी पैकेज री-एक्सपोर्ट)
│ ├── pen-ai-skills/ AI प्रॉम्प्ट स्किल इंजन (चरणबद्ध प्रॉम्प्ट लोडिंग)
│ └── agent/ AI एजेंट SDK (Vercel AI SDK, मल्टी-प्रदाता, एजेंट टीमें)
└── .githooks/ ब्रांच नाम से प्री-कमिट वर्शन सिंक
├── crates/ Rust वर्कस्पेस — प्रोडक्ट
│ ├── op-editor-core/ कैननिकल `.op` (PenDocument) एडिटर स्टेट + EditorCommand + डिज़ाइन वेरिएबल
│ ├── op-editor-ui/ प्लेटफ़ॉर्म-मुक्त विजेट्स + RenderBackend फ़साड (wasm32-clean)
│ ├── op-editor-host-core/ सभी होस्ट्स द्वारा साझा ट्रांसपोर्ट-मुक्त होस्ट स्टेट मशीनें
│ ├── op-host-native/ नेटिव होस्ट लाइब्रेरी — winit + skia-safe GL (डेस्कटॉप + मोबाइल)
│ ├── op-host-web/ ब्राउज़र बंडल — wasm32 cdylib, CanvasKit रेंडरर
│ ├── op-host-desktop/ डेस्कटॉप बाइनरी `openpencil-desktop`; `--serve-web` डेमॉन भी
│ ├── op-host-services/ हेडलेस serve-web / MCP डेमॉन लाइब्रेरी
│ ├── op-host-web-server/ पतली GL-मुक्त वेब-सर्वर बाइनरी
│ ├── op-cli/ CLI टूल — `op` कमांड
│ ├── op-mcp/ MCP सर्वर — टूल्स, बैच डिज़ाइन, लेयर्ड वर्कफ़्लो
│ ├── op-ai/ AI प्रदाता, चैट रनटाइम, स्ट्रीमिंग
│ ├── op-ai-skills/ AI प्रॉम्प्ट स्किल इंजन (चरणबद्ध प्रॉम्प्ट लोडिंग)
│ ├── op-orchestrator/ समवर्ती एजेंट-टीम ऑर्केस्ट्रेशन
│ ├── op-codegen/ कोड जनरेटर (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Figma .fig फ़ाइल पार्सर और कनवर्टर
│ ├── op-git/ Git इंटीग्रेशन — क्लोन, ब्रांच, पुश/पुल, मर्ज
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ वेब SDK वर्कस्पेस (Bun)
│ ├── op-web-sdk/ रीड-ओनली `.op` वेब व्यूअर SDK (wasm बंडल को रैप करता है)
│ ├── op-web-sdk-react/ React 19 एडाप्टर
│ └── op-web-sdk-vue/ Vue 3 एडाप्टर
├── vendor/ वेंडर्ड सबसिस्टम (git सबमॉड्यूल)
│ ├── jian/ Skia विजेट/रेंडर/इवेंट टूलकिट
│ ├── casement/ winit फ़ोर्क
│ └── agent/ क्रॉस-प्रोडक्ट Rust एजेंट रनटाइम (agent-rs)
└── .githooks/ ब्रांच नाम से प्री-कमिट वर्शन सिंक
```
## कीबोर्ड शॉर्टकट

90
README.id.md
View file

@ -80,7 +80,7 @@ File `.op` adalah JSON — mudah dibaca manusia, ramah Git, mudah dibandingkan.
### 🖥️ Berjalan di Mana Saja
Aplikasi web + desktop native di macOS, Windows, dan Linux melalui Electron. Pembaruan otomatis dari GitHub Releases. Asosiasi file `.op` — klik dua kali untuk membuka.
Aplikasi web + desktop native di macOS, Windows, dan Linux — satu inti Rust, satu binary mandiri, tanpa engine browser. Asosiasi file `.op` — klik dua kali untuk membuka.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**Server MCP**
- Server MCP bawaan — instal satu klik ke Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- Deteksi otomatis Node.js — jika tidak terinstal, otomatis beralih ke transport HTTP dan memulai server MCP HTTP
- Server MCP bawaan (crate `op-mcp`) — instal satu klik ke Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- Tidak memerlukan Node.js — transport stdio melalui binary desktop (`--mcp <path>`), ditambah endpoint HTTP langsung (`127.0.0.1:<port>/mcp`) dari aplikasi yang berjalan
- Otomasi desain dari terminal: baca, buat, dan modifikasi file `.op` melalui agen yang kompatibel dengan MCP
- **Alur kerja desain berlapis** — `design_skeleton` → `design_content` → `design_refine` untuk desain multi-bagian dengan fidelitas lebih tinggi
- **Pengambilan prompt tersegmentasi** — muat hanya pengetahuan desain yang Anda butuhkan (schema, layout, roles, icons, planning, dll.)
@ -275,9 +275,9 @@ Mendukung tiga metode input: string inline, `@filepath` (baca dari file), atau `
**Aplikasi Desktop**
- macOS, Windows, dan Linux native melalui Electron
- macOS, Windows, dan Linux native — satu binary mandiri (winit + GPU Skia, tanpa Electron)
- Asosiasi file `.op` — klik dua kali untuk membuka, kunci instans tunggal
- Pembaruan otomatis dari GitHub Releases
- Pemeriksaan pembaruan latar belakang terhadap GitHub Releases
- Menu aplikasi native dengan Simpan sebagai, Buka Terbaru, dan dialog perubahan belum tersimpan saat ditutup
- Persistensi file terbaru
@ -285,21 +285,22 @@ Mendukung tiga metode input: string inline, `@filepath` (baca dari file), atau `
| | |
| --------------- | -------------------------------------------------------------------------------- |
| **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Kanvas** | CanvasKit/Skia (WASM, akselerasi GPU) |
| **State** | Zustand v5 |
| **Server** | Nitro |
| **Desktop** | Electron 35 |
| **Inti** | Workspace Rust (`crates/`) — state editor, widget, host, MCP, AI, codegen |
| **Rendering** | GPU Skia di mana saja — `skia-safe` (GL) pada native, CanvasKit (WASM/WebGL2) di browser |
| **Toolkit UI** | jian — toolkit widget/render/event Rust yang di-vendor (`vendor/jian`) |
| **Windowing** | winit (fork `casement` yang di-vendor) |
| **Desktop** | Binary native `openpencil-desktop` — tanpa engine browser |
| **Web SDK** | `op-web-sdk` + adapter React 19 / Vue 3 — viewer `.op` baca-saja (TypeScript) |
| **CLI** | `op` — kontrol terminal, batch design DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **AI** | Runtime agen Rust bawaan · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK) |
| **Format file** | `.op` — berbasis JSON, mudah dibaca manusia, ramah Git |
## Mengapa Rust
OpenPencil sedang ditulis ulang dari awal dalam **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Build TypeScript + Electron adalah yang tersedia saat ini; penulisan ulang dalam Rust adalah langkah berikutnya — satu inti native yang jauh lebih kecil dan lebih cepat, serta berjalan di lebih banyak platform dari satu basis kode.
OpenPencil telah ditulis ulang dari awal dalam **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Penulisan ulang ini telah selesai — editor TypeScript + Electron dipensiunkan pada `v0.7.5`, dan workspace Rust di repo ini adalah produknya: satu inti native yang jauh lebih kecil dan lebih cepat, serta berjalan di lebih banyak platform dari satu basis kode.
| | TypeScript + Electron (saat ini) | Rust (penulisan ulang) |
| | TypeScript + Electron (dipensiunkan, `v0.7.5`) | Rust (saat ini) |
| ------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------- |
| **Runtime desktop** | Electron — menyertakan Chromium + Node.js | Jendela native (`winit` + GPU Skia), tanpa engine browser |
| **Jejak desktop** | Runtime Chromium penuh per instalasi | Satu binary mandiri — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil sedang ditulis ulang dari awal dalam **Rust** ([#129](https://github.
- **Aksesibilitas native** — AccessKit di macOS, Windows, dan Linux, ditambah mirror DOM di web, alih-alih mengandalkan pohon a11y browser.
- **Satu workspace bertipe** — host MCP, CLI, penyedia AI, pembuatan kode, impor Figma, dan integrasi Git semuanya berada dalam satu workspace Rust, dengan penjagaan rantai pasokan `cargo-deny` di CI.
> **Status:** shell Rust sedang dalam pengembangan aktif (lihat Peta Jalan di bawah). Hingga mencapai paritas fitur untuk `v0.8.0`, unduhan yang dapat diinstal di atas adalah build TypeScript + Electron.
> **Status:** editor TypeScript dipensiunkan pada `v0.7.5` dan kini hanya ada dalam riwayat git; repositori ini adalah workspace Rust. Rilis Rust `v0.8.0` sedang dalam pengembangan aktif (lihat Peta Jalan di bawah).
## Struktur Proyek
```text
openpencil/
├── apps/
│ ├── web/ Aplikasi web TanStack Start
│ │ ├── src/
│ │ │ ├── canvas/ Mesin CanvasKit/Skia — menggambar, sinkronisasi, tata letak
│ │ │ ├── components/ UI React — editor, panel, dialog bersama, ikon
│ │ │ ├── services/ai/ Chat AI, orkestrator, pembuatan desain, streaming
│ │ │ ├── stores/ Zustand — kanvas, dokumen, halaman, riwayat, AI
│ │ │ ├── mcp/ Alat server MCP untuk integrasi CLI eksternal
│ │ │ ├── hooks/ Pintasan keyboard, seret file, tempel Figma
│ │ │ └── uikit/ Sistem kit komponen yang dapat digunakan ulang
│ │ └── server/
│ │ ├── api/ai/ Nitro API — chat streaming, pembuatan, validasi
│ │ └── utils/ Pembungkus Claude CLI, OpenCode, Codex, Copilot
│ ├── desktop/ Aplikasi desktop Electron
│ │ ├── main.ts Jendela, fork Nitro, menu native, pembaruan otomatis
│ │ ├── ipc-handlers.ts Dialog file native, sinkronisasi tema, preferensi IPC
│ │ └── preload.ts Jembatan IPC
│ └── cli/ Alat CLI — perintah `op`
│ ├── src/commands/ Perintah design, document, export, import, node, page, variable
│ ├── connection.ts Koneksi WebSocket ke aplikasi yang berjalan
│ └── launcher.ts Deteksi otomatis dan jalankan aplikasi desktop atau web server
├── packages/
│ ├── pen-types/ Definisi tipe untuk model PenDocument
│ ├── pen-core/ Operasi pohon dokumen, mesin tata letak, variabel
│ ├── pen-codegen/ Generator kode (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Parser dan konverter file Figma .fig
│ ├── pen-renderer/ Renderer CanvasKit/Skia mandiri
│ ├── pen-sdk/ SDK payung (re-ekspor semua paket)
│ ├── pen-ai-skills/ Engine skill AI prompt (pemuatan prompt bertahap)
│ └── agent/ SDK agen AI (Vercel AI SDK, multi-penyedia, tim agen)
└── .githooks/ Pre-commit sinkronisasi versi dari nama branch
├── crates/ Workspace Rust — produknya
│ ├── op-editor-core/ State editor `.op` (PenDocument) kanonis + EditorCommand + variabel desain
│ ├── op-editor-ui/ Widget platform-independen + fasad RenderBackend (wasm32-clean)
│ ├── op-editor-host-core/ State machine host tanpa transport, digunakan bersama semua host
│ ├── op-host-native/ Lib host native — winit + skia-safe GL (desktop + mobile)
│ ├── op-host-web/ Bundle browser — wasm32 cdylib, renderer CanvasKit
│ ├── op-host-desktop/ Binary desktop `openpencil-desktop`; juga daemon `--serve-web`
│ ├── op-host-services/ Lib daemon serve-web / MCP headless
│ ├── op-host-web-server/ Binary web-server ringan tanpa GL
│ ├── op-cli/ Alat CLI — perintah `op`
│ ├── op-mcp/ Server MCP — alat, batch design, alur kerja berlapis
│ ├── op-ai/ Penyedia AI, runtime chat, streaming
│ ├── op-ai-skills/ Engine skill prompt AI (pemuatan prompt bertahap)
│ ├── op-orchestrator/ Orkestrasi tim agen konkuren
│ ├── op-codegen/ Generator kode (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Parser dan konverter file Figma .fig
│ ├── op-git/ Integrasi Git — clone, branch, push/pull, merge
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Workspace Web SDK (Bun)
│ ├── op-web-sdk/ SDK viewer web `.op` baca-saja (membungkus bundle wasm)
│ ├── op-web-sdk-react/ Adapter React 19
│ └── op-web-sdk-vue/ Adapter Vue 3
├── vendor/ Subsistem yang di-vendor (git submodules)
│ ├── jian/ Toolkit widget/render/event Skia
│ ├── casement/ Fork winit
│ └── agent/ Runtime agen Rust lintas produk (agent-rs)
└── .githooks/ Pre-commit sinkronisasi versi dari nama branch
```
## Pintasan Keyboard

90
README.ja.md
View file

@ -80,7 +80,7 @@ Claude Code、Codex、Gemini、OpenCode、Kiro、Copilot CLI にワンクリッ
### 🖥️ どこでも動作
Web アプリ + Electron による macOS・Windows・Linux ネイティブデスクトップ。GitHub Releases からの自動アップデート。`.op` ファイル関連付け — ダブルクリックで開く。
Web アプリ + macOS・Windows・Linux ネイティブデスクトップ — 単一の Rust コア、単一の自己完結型バイナリ、ブラウザエンジン不要。`.op` ファイル関連付け — ダブルクリックで開く。
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP サーバー**
- 内蔵 MCP サーバー — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI にワンクリックでインストール
- Node.js を自動検出 — 未インストールの場合は HTTP トランスポートに自動フォールバックし、MCP HTTP サーバーを自動起動
- 内蔵 MCP サーバー（`op-mcp` crate） — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI にワンクリックでインストール
- Node.js は不要 — デスクトップバイナリ経由の stdio トランスポート（`--mcp <path>`）に加え、実行中のアプリからライブ HTTP エンドポイント（`127.0.0.1:<port>/mcp`）を提供
- ターミナルからのデザイン自動化：MCP 対応エージェントを通じて `.op` ファイルの読み取り、作成、編集が可能
- **レイヤードデザインワークフロー** — `design_skeleton` → `design_content` → `design_refine` による高忠実度マルチセクションデザイン
- **セグメント化プロンプト取得** — 必要なデザイン知識のみをロード（schema、layout、roles、icons、planning など）
@ -275,9 +275,9 @@ cat design.dsl | op design - # stdin からパイプ入力
**デスクトップアプリ**
- Electron によるネイティブ macOS・Windows・Linux 対応
- macOS・Windows・Linux ネイティブ対応 — 単一の自己完結型バイナリ（winit + GPU Skia、Electron 不要）
- `.op` ファイル関連付け — ダブルクリックで開く、シングルインスタンスロック
- GitHub Releases からの自動アップデート
- GitHub Releases に対するバックグラウンド更新チェック
- 名前を付けて保存、最近使った項目を開く、および終了時の未保存変更ダイアログを備えたネイティブアプリケーションメニュー
- 最近使ったファイルの永続化
@ -285,21 +285,22 @@ cat design.dsl | op design - # stdin からパイプ入力
| | |
| ------------------ | -------------------------------------------------------------------------------- |
| **フロントエンド** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **キャンバス** | CanvasKit/Skia（WASM、GPU アクセラレーション） |
| **状態管理** | Zustand v5 |
| **サーバー** | Nitro |
| **デスクトップ** | Electron 35 |
| **コア** | Rust ワークスペース（`crates/`） — エディター状態、ウィジェット、ホスト、MCP、AI、codegen |
| **レンダリング** | あらゆる場所で GPU Skia — ネイティブは `skia-safe`（GL）、ブラウザは CanvasKit（WASM/WebGL2） |
| **UI ツールキット** | jian — ベンダー化された Rust ウィジェット/レンダー/イベントツールキット（`vendor/jian`） |
| **ウィンドウイング** | winit（ベンダー化された `casement` フォーク） |
| **デスクトップ** | ネイティブバイナリ `openpencil-desktop` — ブラウザエンジン不要 |
| **Web SDK** | `op-web-sdk` + React 19 / Vue 3 アダプター — 読み取り専用 `.op` ビューアー（TypeScript） |
| **CLI** | `op` — ターミナル制御、バッチデザインDSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **ランタイム** | Bun · Vite 7 |
| **AI** | ビルトイン Rust エージェントランタイム · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **リント** | clippy · rustfmt（Rust） · oxlint · oxfmt（Web SDK） |
| **ファイル形式** | `.op` — JSON ベース、人間が読みやすく、Git フレンドリー |
## なぜ Rust か
OpenPencil は **Rust** で一から書き直されています ([#129](https://github.com/ZSeven-W/openpencil/issues/129))。現在リリースされているのは TypeScript + Electron ビルドです。Rust による書き直しがその次のステップ — ひとつのネイティブコアで劇的に軽量かつ高速になり、単一のコードベースからより多くのプラットフォームで動作します。
OpenPencil は **Rust** で一から書き直されました ([#129](https://github.com/ZSeven-W/openpencil/issues/129))。書き直しは完了しています — TypeScript + Electron エディターは `v0.7.5` で廃止され、このリポジトリの Rust ワークスペースが製品そのものです：ひとつのネイティブコアで劇的に軽量かつ高速になり、単一のコードベースからより多くのプラットフォームで動作します。
| | TypeScript + Electron（今日） | Rust（書き直し後） |
| | TypeScript + Electron（廃止済み、`v0.7.5`） | Rust（現在） |
| --------------------- | ---------------------------------------------- | ------------------------------------------------------------------- |
| **デスクトップランタイム** | Electron — Chromium + Node.js をバンドル | ネイティブウィンドウ（`winit` + GPU Skia）、ブラウザエンジン不要 |
| **デスクトップフットプリント** | インストールごとに Chromium ランタイム全体 | 単一の自己完結型バイナリ — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil は **Rust** で一から書き直されています ([#129](https://
- **ネイティブアクセシビリティ** — macOS・Windows・Linux では AccessKit を使用し、Web ではブラウザの a11y ツリーに依存する代わりに DOM ミラーを提供。
- **型チェック済みの単一ワークスペース** — MCP ホスト、CLI、AI プロバイダー、コード生成、Figma インポート、Git 統合がすべて単一の Rust ワークスペースに収まり、CI では `cargo-deny` によるサプライチェーンのゲーティングを実施。
> **ステータス：** Rust シェルは現在活発に開発中です（下記のロードマップを参照）。`v0.8.0` の機能同等性に達するまで、上記のインストーラブルダウンロードは TypeScript + Electron ビルドです。
> **ステータス：** TypeScript エディターは `v0.7.5` で廃止され、現在は Git 履歴にのみ残っています。このリポジトリは Rust ワークスペースです。`v0.8.0` の Rust リリースは現在活発に開発中です（下記のロードマップを参照）。
## プロジェクト構成
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start Web アプリ
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia エンジン — 描画、同期、レイアウト
│ │ │ ├── components/ React UI — エディター、パネル、共有ダイアログ、アイコン
│ │ │ ├── services/ai/ AI チャット、オーケストレーター、デザイン生成、ストリーミング
│ │ │ ├── stores/ Zustand — キャンバス、ドキュメント、ページ、履歴、AI
│ │ │ ├── mcp/ 外部 CLI 統合用 MCP サーバーツール
│ │ │ ├── hooks/ キーボードショートカット、ファイルドロップ、Figma ペースト
│ │ │ └── uikit/ 再利用可能なコンポーネントキットシステム
│ │ └── server/
│ │ ├── api/ai/ Nitro API — ストリーミングチャット、生成、バリデーション
│ │ └── utils/ Claude CLI、OpenCode、Codex、Copilot ラッパー
│ ├── desktop/ Electron デスクトップアプリ
│ │ ├── main.ts ウィンドウ、Nitro フォーク、ネイティブメニュー、自動アップデーター
│ │ ├── ipc-handlers.ts ネイティブファイルダイアログ、テーマ同期、設定 IPC
│ │ └── preload.ts IPC ブリッジ
│ └── cli/ CLIツール — `op` コマンド
│ ├── src/commands/ デザイン、ドキュメント、エクスポート、インポート、ノード、ページ、変数コマンド
│ ├── connection.ts 実行中アプリへのWebSocket接続
│ └── launcher.ts デスクトップアプリまたはWebサーバーの自動検出・起動
├── packages/
│ ├── pen-types/ PenDocument モデルの型定義
│ ├── pen-core/ ドキュメントツリー操作、レイアウトエンジン、変数
│ ├── pen-codegen/ コードジェネレーター（React、HTML、Vue、Flutter、...）
│ ├── pen-figma/ Figma .fig ファイルパーサーとコンバーター
│ ├── pen-renderer/ スタンドアロン CanvasKit/Skia レンダラー
│ ├── pen-sdk/ アンブレラ SDK（全パッケージの再エクスポート）
│ ├── pen-ai-skills/ AI プロンプトスキルエンジン（フェーズ駆動プロンプト読込）
│ └── agent/ AI エージェント SDK（Vercel AI SDK、マルチプロバイダー、エージェントチーム）
└── .githooks/ ブランチ名からのプレコミットバージョン同期
├── crates/ Rust ワークスペース — 製品本体
│ ├── op-editor-core/ 正規の `.op`（PenDocument）エディター状態 + EditorCommand + デザイン変数
│ ├── op-editor-ui/ プラットフォーム非依存ウィジェット + RenderBackend ファサード（wasm32 対応）
│ ├── op-editor-host-core/ 全ホスト共有のトランスポート非依存ホストステートマシン
│ ├── op-host-native/ ネイティブホストライブラリ — winit + skia-safe GL（デスクトップ + モバイル）
│ ├── op-host-web/ ブラウザバンドル — wasm32 cdylib、CanvasKit レンダラー
│ ├── op-host-desktop/ デスクトップバイナリ `openpencil-desktop`；`--serve-web` デーモンも兼ねる
│ ├── op-host-services/ ヘッドレス serve-web / MCP デーモンライブラリ
│ ├── op-host-web-server/ 軽量な GL 非依存 Web サーバーバイナリ
│ ├── op-cli/ CLI ツール — `op` コマンド
│ ├── op-mcp/ MCP サーバー — ツール、バッチデザイン、レイヤードワークフロー
│ ├── op-ai/ AI プロバイダー、チャットランタイム、ストリーミング
│ ├── op-ai-skills/ AI プロンプトスキルエンジン（フェーズ駆動プロンプト読込）
│ ├── op-orchestrator/ 並行エージェントチームのオーケストレーション
│ ├── op-codegen/ コードジェネレーター（React、HTML、Vue、Flutter、...）
│ ├── op-figma/ Figma .fig ファイルパーサーとコンバーター
│ ├── op-git/ Git 統合 — クローン、ブランチ、プッシュ/プル、マージ
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web SDK ワークスペース（Bun）
│ ├── op-web-sdk/ 読み取り専用 `.op` Web ビューアー SDK（wasm バンドルをラップ）
│ ├── op-web-sdk-react/ React 19 アダプター
│ └── op-web-sdk-vue/ Vue 3 アダプター
├── vendor/ ベンダー化されたサブシステム（git サブモジュール）
│ ├── jian/ Skia ウィジェット/レンダー/イベントツールキット
│ ├── casement/ winit フォーク
│ └── agent/ 製品横断 Rust エージェントランタイム（agent-rs）
└── .githooks/ ブランチ名からのプレコミットバージョン同期
```
## キーボードショートカット

98
README.ko.md
View file

@ -80,7 +80,7 @@ Claude Code, Codex, Gemini, OpenCode, Kiro 또는 Copilot CLI에 원클릭 설
### 🖥️ 어디서든 실행
웹 앱 + Electron을 통한 macOS, Windows, Linux 네이티브 데스크톱. GitHub Releases에서 자동 업데이트. `.op` 파일 연결 — 더블 클릭으로 열기.
웹 앱 + macOS, Windows, Linux 네이티브 데스크톱 — 하나의 Rust 코어, 단일 자급자족 바이너리, 브라우저 엔진 없음. `.op` 파일 연결 — 더블 클릭으로 열기.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP 서버**
- 내장 MCP 서버 — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI에 원클릭 설치
- Node.js 자동 감지 — 설치되지 않은 경우 HTTP 전송 모드로 자동 대체하고 MCP HTTP 서버를 자동 시작
- 내장 MCP 서버 (`op-mcp` 크레이트) — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI에 원클릭 설치
- Node.js 불필요 — 데스크톱 바이너리(`--mcp <path>`)를 통한 stdio 전송, 그리고 실행 중인 앱이 제공하는 실시간 HTTP 엔드포인트(`127.0.0.1:<port>/mcp`)
- 터미널에서 디자인 자동화: MCP 호환 에이전트를 통해 `.op` 파일 읽기, 생성, 편집
- **계층적 디자인 워크플로** — `design_skeleton` → `design_content` → `design_refine`으로 더 높은 충실도의 멀티 섹션 디자인
- **세그먼트 프롬프트 검색** — 필요한 디자인 지식만 로드 (schema, layout, roles, icons, planning 등)
@ -275,31 +275,32 @@ cat design.dsl | op design - # stdin에서 파이프 입력
**데스크톱 앱**
- Electron을 통한 네이티브 macOS, Windows, Linux 지원
- 네이티브 macOS, Windows, Linux — 단일 자급자족 바이너리 (winit + GPU Skia, Electron 없음)
- `.op` 파일 연결 — 더블 클릭으로 열기, 단일 인스턴스 잠금
- GitHub Releases에서 자동 업데이트
- GitHub Releases 대비 백그라운드 업데이트 확인
- 다른 이름으로 저장, 최근 항목 열기, 닫을 때 저장되지 않은 변경 사항 대화상자를 지원하는 네이티브 애플리케이션 메뉴
- 최근 파일 영속성
## 기술 스택
| | |
| -------------- | -------------------------------------------------------------------------------- |
| **프론트엔드** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **캔버스** | CanvasKit/Skia (WASM, GPU 가속) |
| **상태 관리** | Zustand v5 |
| **서버** | Nitro |
| **데스크톱** | Electron 35 |
| **CLI** | `op` — 터미널 제어, 배치 디자인 DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **런타임** | Bun · Vite 7 |
| **파일 형식** | `.op` — JSON 기반, 사람이 읽을 수 있는, Git 친화적 |
| | |
| ------------- | ------------------------------------------------------------------------------ |
| **코어** | Rust 워크스페이스 (`crates/`) — 에디터 상태, 위젯, 호스트, MCP, AI, 코드젠 |
| **렌더링** | 모든 곳에서 GPU Skia — 네이티브는 `skia-safe` (GL), 브라우저는 CanvasKit (WASM/WebGL2) |
| **UI 툴킷** | jian — 벤더링된 Rust 위젯/렌더/이벤트 툴킷 (`vendor/jian`) |
| **윈도잉** | winit (벤더링된 `casement` 포크) |
| **데스크톱** | 네이티브 바이너리 `openpencil-desktop` — 브라우저 엔진 없음 |
| **웹 SDK** | `op-web-sdk` + React 19 / Vue 3 어댑터 — 읽기 전용 `.op` 뷰어 (TypeScript) |
| **CLI** | `op` — 터미널 제어, 배치 디자인 DSL |
| **AI** | 내장 Rust 에이전트 런타임 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **린트** | clippy · rustfmt (Rust) · oxlint · oxfmt (웹 SDK) |
| **파일 형식** | `.op` — JSON 기반, 사람이 읽을 수 있는, Git 친화적 |
## Rust를 선택한 이유
OpenPencil은 **Rust**로 처음부터 다시 작성되고 있습니다 ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). 현재 배포되는 빌드는 TypeScript + Electron이며, Rust 재작성 버전이 그 다음 단계입니다 — 단일 네이티브 코어로 크기는 획기적으로 줄고 속도는 빨라지며, 하나의 코드베이스에서 더 많은 플랫폼을 지원합니다.
OpenPencil은 처음부터 **Rust**로 다시 작성되었습니다 ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). 재작성이 완료되었습니다 — TypeScript + Electron 에디터는 `v0.7.5`에서 은퇴했고, 이 저장소의 Rust 워크스페이스가 바로 제품입니다: 단일 네이티브 코어로 크기는 획기적으로 줄고 속도는 빨라지며, 하나의 코드베이스에서 더 많은 플랫폼을 지원합니다.
| | TypeScript + Electron (현재) | Rust (재작성 버전) |
| | TypeScript + Electron (은퇴, `v0.7.5`) | Rust (현재) |
| ----------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------ |
| **데스크톱 런타임** | Electron — Chromium + Node.js 번들 | 네이티브 윈도우 (`winit` + GPU Skia), 브라우저 엔진 없음 |
| **데스크톱 설치 크기** | 설치마다 전체 Chromium 런타임 포함 | 단일 자급자족 바이너리 — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil은 **Rust**로 처음부터 다시 작성되고 있습니다 ([#129](
- **네이티브 접근성** — 브라우저의 접근성 트리에 의존하는 대신 macOS, Windows, Linux에서는 AccessKit을, 웹에서는 DOM 미러를 사용합니다.
- **타입 검사된 단일 워크스페이스** — MCP 호스트, CLI, AI 제공자, 코드 생성, Figma 가져오기, Git 통합이 모두 단일 Rust 워크스페이스 안에 있으며, CI에서 `cargo-deny`로 공급망을 검증합니다.
> **상태:** Rust 셸은 활발히 개발 중입니다 (아래 로드맵 참고). `v0.8.0` 기능 동등성에 도달할 때까지는 위의 설치 가능한 다운로드가 TypeScript + Electron 빌드입니다.
> **상태:** TypeScript 에디터는 `v0.7.5`에서 은퇴하여 이제 git 히스토리에만 남아 있으며, 이 저장소는 Rust 워크스페이스입니다. `v0.8.0` Rust 릴리스는 활발히 개발 중입니다 (아래 로드맵 참고).
## 프로젝트 구조
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start 웹 앱
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia 엔진 — 드로잉, 동기화, 레이아웃
│ │ │ ├── components/ React UI — 에디터, 패널, 공유 다이얼로그, 아이콘
│ │ │ ├── services/ai/ AI 채팅, 오케스트레이터, 디자인 생성, 스트리밍
│ │ │ ├── stores/ Zustand — 캔버스, 문서, 페이지, 히스토리, AI
│ │ │ ├── mcp/ 외부 CLI 통합용 MCP 서버 도구
│ │ │ ├── hooks/ 키보드 단축키, 파일 드롭, Figma 붙여넣기
│ │ │ └── uikit/ 재사용 가능한 컴포넌트 킷 시스템
│ │ └── server/
│ │ ├── api/ai/ Nitro API — 스트리밍 채팅, 생성, 유효성 검사
│ │ └── utils/ Claude CLI, OpenCode, Codex, Copilot 래퍼
│ ├── desktop/ Electron 데스크톱 앱
│ │ ├── main.ts 윈도우, Nitro 포크, 네이티브 메뉴, 자동 업데이터
│ │ ├── ipc-handlers.ts 네이티브 파일 대화상자, 테마 동기화, 환경설정 IPC
│ │ └── preload.ts IPC 브리지
│ └── cli/ CLI 도구 — `op` 명령어
│ ├── src/commands/ 디자인, 문서, 내보내기, 가져오기, 노드, 페이지, 변수 명령어
│ ├── connection.ts 실행 중인 앱과의 WebSocket 연결
│ └── launcher.ts 데스크톱 앱 또는 웹 서버 자동 감지 및 실행
├── packages/
│ ├── pen-types/ PenDocument 모델 타입 정의
│ ├── pen-core/ 문서 트리 연산, 레이아웃 엔진, 변수
│ ├── pen-codegen/ 코드 생성기 (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Figma .fig 파일 파서 및 변환기
│ ├── pen-renderer/ 독립형 CanvasKit/Skia 렌더러
│ ├── pen-sdk/ 통합 SDK (모든 패키지 재export)
│ ├── pen-ai-skills/ AI 프롬프트 스킬 엔진 (단계별 프롬프트 로딩)
│ └── agent/ AI 에이전트 SDK (Vercel AI SDK, 멀티 제공자, 에이전트 팀)
└── .githooks/ 브랜치 이름에서 버전 동기화를 위한 pre-commit
├── crates/ Rust 워크스페이스 — 제품 본체
│ ├── op-editor-core/ 정규 `.op` (PenDocument) 에디터 상태 + EditorCommand + 디자인 변수
│ ├── op-editor-ui/ 플랫폼 독립적 위젯 + RenderBackend 파사드 (wasm32-clean)
│ ├── op-editor-host-core/ 모든 호스트가 공유하는 전송 계층 독립적 호스트 상태 머신
│ ├── op-host-native/ 네이티브 호스트 라이브러리 — winit + skia-safe GL (데스크톱 + 모바일)
│ ├── op-host-web/ 브라우저 번들 — wasm32 cdylib, CanvasKit 렌더러
│ ├── op-host-desktop/ 데스크톱 바이너리 `openpencil-desktop`; `--serve-web` 데몬 겸용
│ ├── op-host-services/ 헤드리스 serve-web / MCP 데몬 라이브러리
│ ├── op-host-web-server/ GL 없는 경량 web-server 바이너리
│ ├── op-cli/ CLI 도구 — `op` 명령어
│ ├── op-mcp/ MCP 서버 — 도구, 배치 디자인, 계층적 워크플로
│ ├── op-ai/ AI 제공자, 채팅 런타임, 스트리밍
│ ├── op-ai-skills/ AI 프롬프트 스킬 엔진 (단계별 프롬프트 로딩)
│ ├── op-orchestrator/ 동시 에이전트 팀 오케스트레이션
│ ├── op-codegen/ 코드 생성기 (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Figma .fig 파일 파서 및 변환기
│ ├── op-git/ Git 통합 — 클론, 브랜치, 푸시/풀, 병합
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ 웹 SDK 워크스페이스 (Bun)
│ ├── op-web-sdk/ 읽기 전용 `.op` 웹 뷰어 SDK (wasm 번들을 래핑)
│ ├── op-web-sdk-react/ React 19 어댑터
│ └── op-web-sdk-vue/ Vue 3 어댑터
├── vendor/ 벤더링된 서브시스템 (git submodules)
│ ├── jian/ Skia 위젯/렌더/이벤트 툴킷
│ ├── casement/ winit 포크
│ └── agent/ 제품 공용 Rust 에이전트 런타임 (agent-rs)
└── .githooks/ 브랜치 이름에서 버전 동기화를 위한 pre-commit
```
## 키보드 단축키

120
README.md
View file

@ -89,7 +89,7 @@ Built-in style guide library with tag-based fuzzy matching. Apply visual styles
### 🖥️ Runs Everywhere
Web app + native desktop on macOS, Windows, and Linux via Electron. Auto-updates from GitHub Releases. `.op` file association — double-click to open.
Web app + native desktop on macOS, Windows, and Linux — one Rust core, a single self-contained binary, no browser engine. `.op` file association — double-click to open.
</td>
<td width="50%">
@ -112,7 +112,7 @@ Export to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack C
### 🧩 Embeddable SDK
`pen-engine` (headless) + `pen-react` (React UI SDK) — embed the design engine in your own app. DesignProvider, DesignCanvas, hooks, panels, and toolbar components out of the box.
`op-web-sdk` (vanilla) + `op-web-sdk-react` / `op-web-sdk-vue` adapters — embed a read-only `.op` viewer in your own app, powered by the same wasm renderer the editor ships.
</td>
</tr>
@ -159,15 +159,15 @@ Or use the install script (macOS / Linux):
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash
```
## Cloning（含 Rust 子系统）
## Cloning (with submodules)
```bash
git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
# Or already cloned:
git submodule update --init --recursive
# Or already cloned — sync first so stale submodule URLs pick up .gitmodules changes:
git submodule sync --recursive && git submodule update --init --recursive
```
`vendor/agent` is the `agent-rs` submodule (cross-product, OP + Zode share); HTTPS URL needs no SSH key.
Three submodules live under `vendor/`, all public and fetched over HTTPS (no SSH key needed): `jian` (Skia widget/render/event toolkit), `casement` (winit fork), and `agent` (`agent-rs` — cross-product Rust agent runtime, shared by OP + Zode). `vendor/anthropic-agent-sdk` is tracked in-tree, not a submodule.
## Quick Start (Development)
@ -263,8 +263,8 @@ docker build --target full -t openpencil-full .
**MCP Server**
- Built-in MCP server (`pen-mcp` package) — one-click install into Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- Auto-detects Node.js — if not installed, falls back to HTTP transport and auto-starts the MCP HTTP server
- Built-in MCP server (`op-mcp` crate) — one-click install into Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- No Node.js required — stdio transport via the desktop binary (`--mcp <path>`), plus a live HTTP endpoint (`127.0.0.1:<port>/mcp`) from the running app
- Design automation from terminal: read, create, and modify `.op` files via any MCP-compatible agent
- **Layered design workflow** — `design_skeleton` → `design_content` → `design_refine` for higher-fidelity multi-section designs
- **Segmented prompt retrieval** — load only the design knowledge you need (schema, layout, roles, icons, planning, etc.)
@ -346,33 +346,32 @@ Supports three input methods: inline string, `@filepath` (read from file), or `-
**Desktop App**
- Native macOS, Windows, and Linux via Electron
- Native macOS, Windows, and Linux — a single self-contained binary (winit + GPU Skia, no Electron)
- `.op` file association — double-click to open, single-instance lock
- Auto-update from GitHub Releases
- Background update check against GitHub Releases
- Native application menu with Save As, Open Recent, and an unsaved-changes dialog on close
- Recent files persistence
## Tech Stack
| | |
| --------------- | --------------------------------------------------------------------------------------- |
| **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Canvas** | CanvasKit/Skia (WASM, GPU-accelerated) |
| **Engine** | pen-engine (headless) · pen-react (React UI SDK) |
| **State** | Zustand v5 |
| **Server** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — terminal control, batch design DSL |
| **AI** | Built-in Rust runtime · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Lint** | oxlint · oxfmt |
| **File format** | `.op` — JSON-based, human-readable, Git-friendly |
| | |
| --------------- | ------------------------------------------------------------------------------------------ |
| **Core** | Rust workspace (`crates/`) — editor state, widgets, hosts, MCP, AI, codegen |
| **Rendering** | GPU Skia everywhere — `skia-safe` (GL) on native, CanvasKit (WASM/WebGL2) in the browser |
| **UI toolkit** | jian — vendored Rust widget/render/event toolkit (`vendor/jian`) |
| **Windowing** | winit (vendored `casement` fork) |
| **Desktop** | Native binary `openpencil-desktop` — no browser engine |
| **Web SDK** | `op-web-sdk` + React 19 / Vue 3 adapters — read-only `.op` viewer (TypeScript) |
| **CLI** | `op` — terminal control, batch design DSL |
| **AI** | Built-in Rust agent runtime · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK) |
| **File format** | `.op` — JSON-based, human-readable, Git-friendly |
## Why Rust
OpenPencil is being rewritten from the ground up in **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). The TypeScript + Electron build is what ships today; the Rust rewrite is what's next — one native core that is dramatically smaller and faster, and runs on more platforms from a single codebase.
OpenPencil was rewritten from the ground up in **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). The rewrite is complete — the TypeScript + Electron editor was retired at `v0.7.5`, and the Rust workspace in this repo is the product: one native core that is dramatically smaller and faster, and runs on more platforms from a single codebase.
| | TypeScript + Electron (today) | Rust (the rewrite) |
| | TypeScript + Electron (retired, `v0.7.5`) | Rust (today) |
| --------------------- | ---------------------------------------------- | ------------------------------------------------------------------- |
| **Desktop runtime** | Electron — bundles Chromium + Node.js | Native window (`winit` + GPU Skia), no browser engine |
| **Desktop footprint** | Full Chromium runtime per install | Single self-contained binary — **55.5 MB** |
@ -392,47 +391,40 @@ OpenPencil is being rewritten from the ground up in **Rust** ([#129](https://git
- **Native accessibility** — AccessKit on macOS, Windows, and Linux, plus a DOM mirror on web, instead of leaning on a browser's a11y tree.
- **One type-checked workspace** — the MCP host, CLI, AI providers, code generation, Figma import, and Git integration all live in a single Rust workspace, with `cargo-deny` supply-chain gating in CI.
> **Status:** the Rust shell is under active development (see the Roadmap below). Until it reaches feature parity for `v0.8.0`, the installable downloads above are the TypeScript + Electron build.
> **Status:** the TypeScript editor was retired at `v0.7.5` and lives only in git history; this repository is the Rust workspace. The `v0.8.0` Rust release is under active development (see the Roadmap below).
## Project Structure
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start web app
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia engine — drawing, sync, layout
│ │ │ ├── components/ React UI — editor, panels, shared dialogs, icons
│ │ │ ├── services/ai/ AI chat, orchestrator, design generation, streaming
│ │ │ ├── services/codegen/ Code generation service wrappers
│ │ │ ├── stores/ Zustand — canvas, document, pages, history, AI
│ │ │ ├── hooks/ Keyboard shortcuts, file drop, Figma paste, MCP sync
│ │ │ ├── i18n/ Internationalization — 15 locales
│ │ │ └── uikit/ Reusable component kit system
│ │ └── server/
│ │ ├── api/ai/ Nitro API — streaming chat, agent, generation, image search
│ │ ├── api/mcp/ MCP HTTP transport endpoints
│ │ └── utils/ Claude, OpenCode, Codex, Copilot, Gemini CLI wrappers
│ ├── desktop/ Electron desktop app
│ │ ├── main.ts Window, Nitro fork, native menu, auto-updater
│ │ ├── ipc-handlers.ts Native file dialogs, theme sync, prefs IPC
│ │ └── preload.ts IPC bridge
│ └── cli/ CLI tool — `op` command
│ ├── src/commands/ Design, document, export, import, node, page, variable commands
│ ├── connection.ts WebSocket connection to running app
│ └── launcher.ts Auto-detect and launch desktop app or web server
├── packages/
│ ├── pen-types/ Type definitions for PenDocument model
│ ├── pen-core/ Document tree ops, layout engine, variables
│ ├── pen-engine/ Headless design engine — document, selection, history, viewport
│ ├── pen-react/ React UI SDK — provider, canvas, hooks, panels, toolbar
│ ├── pen-codegen/ Code generators (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Figma .fig file parser and converter
│ ├── pen-renderer/ Standalone CanvasKit/Skia renderer
│ ├── pen-mcp/ MCP server — tools, routes, document manager
│ ├── pen-sdk/ Umbrella SDK (re-exports all packages)
│ └── pen-ai-skills/ AI prompt skill engine (phase-driven prompt loading)
└── .githooks/ Pre-commit version sync from branch name
├── crates/ Rust workspace — the product
│ ├── op-editor-core/ Canonical `.op` (PenDocument) editor state + EditorCommand + design variables
│ ├── op-editor-ui/ Platform-free widgets + RenderBackend facade (wasm32-clean)
│ ├── op-editor-host-core/ Transport-free host state machines shared by all hosts
│ ├── op-host-native/ Native host lib — winit + skia-safe GL (desktop + mobile)
│ ├── op-host-web/ Browser bundle — wasm32 cdylib, CanvasKit renderer
│ ├── op-host-desktop/ Desktop binary `openpencil-desktop`; also the `--serve-web` daemon
│ ├── op-host-services/ Headless serve-web / MCP daemon lib
│ ├── op-host-web-server/ Thin GL-free web-server binary
│ ├── op-cli/ CLI tool — `op` command
│ ├── op-mcp/ MCP server — tools, batch design, layered workflow
│ ├── op-ai/ AI providers, chat runtime, streaming
│ ├── op-ai-skills/ AI prompt skill engine (phase-driven prompt loading)
│ ├── op-orchestrator/ Concurrent agent-team orchestration
│ ├── op-codegen/ Code generators (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Figma .fig file parser and converter
│ ├── op-git/ Git integration — clone, branch, push/pull, merge
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web SDK workspace (Bun)
│ ├── op-web-sdk/ Read-only `.op` web viewer SDK (wraps the wasm bundle)
│ ├── op-web-sdk-react/ React 19 adapter
│ └── op-web-sdk-vue/ Vue 3 adapter
├── vendor/ Vendored subsystems (git submodules)
│ ├── jian/ Skia widget/render/event toolkit
│ ├── casement/ winit fork
│ └── agent/ Cross-product Rust agent runtime (agent-rs)
└── .githooks/ Pre-commit version sync from branch name
```
## Keyboard Shortcuts
@ -472,9 +464,9 @@ cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon cat
cd packages && bun run bump <version> # Sync SDK package.json versions
```
### Rust subsystem (Step 0+)
### Rust workspace details
OpenPencil 正在进行全量 Rust 化。当前状态见 `openpencil-docs/superpowers/specs/2026-05-02-rust-ification-kickoff.md`（v7 FROZEN）。
The Rust-ification is complete — the Rust workspace is the product. Kickoff spec: `openpencil-docs/superpowers/specs/2026-05-02-rust-ification-kickoff.md` (v7 FROZEN).
```bash
# Install Rust toolchain (rust-toolchain.toml auto-pins 1.94)
@ -502,8 +494,6 @@ cargo deny check && cargo deny --target wasm32-unknown-unknown check bans
**Submodule:** `vendor/agent` → `github.com/ZSeven-W/agent-rs` (cross-product Rust agent runtime).
**Phase boundary:** Step 0 = workspace skeleton only (no feature porting). Real implementation begins at Step 1 (kill-spike) and beyond.
## Contributing
Contributions are welcome! See [CLAUDE.md](./CLAUDE.md) for architecture details and code style.

98
README.pt.md
View file

@ -80,7 +80,7 @@ Arquivos `.op` são JSON — legíveis por humanos, compatíveis com Git, com di
### 🖥️ Roda em Qualquer Lugar
App web + desktop nativo no macOS, Windows e Linux via Electron. Atualização automática a partir do GitHub Releases. Associação de arquivos `.op` — clique duplo para abrir.
App web + desktop nativo no macOS, Windows e Linux — um único núcleo Rust, um binário único autocontido, sem motor de navegador. Associação de arquivos `.op` — clique duplo para abrir.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**Servidor MCP**
- Servidor MCP integrado — instalação com um clique no Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- Detecção automática de Node.js — se não instalado, recurso automático para transporte HTTP e início automático do servidor MCP HTTP
- Servidor MCP integrado (crate `op-mcp`) — instalação com um clique no Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- Não requer Node.js — transporte stdio via o binário desktop (`--mcp <path>`), além de um endpoint HTTP ativo (`127.0.0.1:<port>/mcp`) a partir do app em execução
- Automação de design pelo terminal: leia, crie e modifique arquivos `.op` via qualquer agente compatível com MCP
- **Fluxo de design em camadas** — `design_skeleton` → `design_content` → `design_refine` para designs multi-seção de maior fidelidade
- **Recuperação segmentada de prompts** — carregue apenas o conhecimento de design necessário (schema, layout, roles, icons, planning, etc.)
@ -275,31 +275,32 @@ Suporta três métodos de entrada: string inline, `@filepath` (ler de arquivo) o
**Aplicativo Desktop**
- macOS, Windows e Linux nativos via Electron
- macOS, Windows e Linux nativos — um único binário autocontido (winit + GPU Skia, sem Electron)
- Associação de arquivos `.op` — clique duplo para abrir, bloqueio de instância única
- Atualização automática a partir do GitHub Releases
- Verificação de atualização em segundo plano a partir do GitHub Releases
- Menu de aplicativo nativo com Salvar como, Abrir recentes e um diálogo de alterações não salvas ao fechar
- Persistência de arquivos recentes
## Stack Tecnológica
| | |
| ---------------------- | -------------------------------------------------------------------------------- |
| **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Canvas** | CanvasKit/Skia (WASM, acelerado por GPU) |
| **Estado** | Zustand v5 |
| **Servidor** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — controle pelo terminal, DSL de design em lote |
| **IA** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Formato de arquivo** | `.op` — baseado em JSON, legível por humanos, compatível com Git |
| | |
| ---------------------- | ------------------------------------------------------------------------------------- |
| **Núcleo** | Workspace Rust (`crates/`) — estado do editor, widgets, hosts, MCP, IA, codegen |
| **Renderização** | GPU Skia em todo lugar — `skia-safe` (GL) no nativo, CanvasKit (WASM/WebGL2) no navegador |
| **Kit de UI** | jian — toolkit Rust de widget/renderização/eventos vendorizado (`vendor/jian`) |
| **Janelamento** | winit (fork `casement` vendorizado) |
| **Desktop** | Binário nativo `openpencil-desktop` — sem motor de navegador |
| **SDK Web** | `op-web-sdk` + adaptadores React 19 / Vue 3 — visualizador `.op` somente leitura (TypeScript) |
| **CLI** | `op` — controle pelo terminal, DSL de design em lote |
| **IA** | Runtime de agente Rust integrado · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (SDK web) |
| **Formato de arquivo** | `.op` — baseado em JSON, legível por humanos, compatível com Git |
## Por que Rust
O OpenPencil está sendo reescrito do zero em **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). A versão TypeScript + Electron é o que está disponível hoje; a reescrita em Rust é o próximo passo — um núcleo nativo drasticamente menor e mais rápido, que roda em mais plataformas a partir de uma única base de código.
O OpenPencil foi reescrito do zero em **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). A reescrita está completa — o editor TypeScript + Electron foi descontinuado na `v0.7.5`, e o workspace Rust deste repositório é o produto: um núcleo nativo drasticamente menor e mais rápido, que roda em mais plataformas a partir de uma única base de código.
| | TypeScript + Electron (hoje) | Rust (a reescrita) |
| | TypeScript + Electron (descontinuado, `v0.7.5`) | Rust (hoje) |
| ------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------ |
| **Runtime desktop** | Electron — empacota Chromium + Node.js | Janela nativa (`winit` + GPU Skia), sem motor de navegador |
| **Pegada desktop** | Runtime completo do Chromium por instalação | Binário único autocontido — **55.5 MB** |
@ -319,43 +320,40 @@ O OpenPencil está sendo reescrito do zero em **Rust** ([#129](https://github.co
- **Acessibilidade nativa** — AccessKit no macOS, Windows e Linux, mais um espelho DOM na web, em vez de depender da árvore de acessibilidade de um navegador.
- **Um workspace com verificação de tipos** — o host MCP, CLI, provedores de AI, geração de código, importação do Figma e integração com Git vivem em um único workspace Rust, com o `cargo-deny` fazendo controle da cadeia de suprimentos na CI.
> **Status:** o shell Rust está em desenvolvimento ativo (consulte o Roadmap abaixo). Até atingir paridade de recursos para o `v0.8.0`, os downloads instaláveis acima são a versão TypeScript + Electron.
> **Status:** o editor TypeScript foi descontinuado na `v0.7.5` e existe apenas no histórico do Git; este repositório é o workspace Rust. O lançamento Rust `v0.8.0` está em desenvolvimento ativo (consulte o Roadmap abaixo).
## Estrutura do Projeto
```text
openpencil/
├── apps/
│ ├── web/ Aplicação web TanStack Start
│ │ ├── src/
│ │ │ ├── canvas/ Motor CanvasKit/Skia — desenho, sincronização, layout
│ │ │ ├── components/ UI React — editor, painéis, diálogos compartilhados, ícones
│ │ │ ├── services/ai/ Chat IA, orquestrador, geração de design, streaming
│ │ │ ├── stores/ Zustand — canvas, documento, páginas, histórico, IA
│ │ │ ├── mcp/ Ferramentas do servidor MCP para integração com CLI externo
│ │ │ ├── hooks/ Atalhos de teclado, soltar arquivos, colar do Figma
│ │ │ └── uikit/ Sistema de kit de componentes reutilizáveis
│ │ └── server/
│ │ ├── api/ai/ API Nitro — chat em streaming, geração, validação
│ │ └── utils/ Wrappers de cliente Claude CLI, OpenCode, Codex, Copilot
│ ├── desktop/ Aplicativo desktop Electron
│ │ ├── main.ts Janela, fork do Nitro, menu nativo, atualizador automático
│ │ ├── ipc-handlers.ts Diálogos de arquivo nativos, sincronização de tema, preferências IPC
│ │ └── preload.ts Ponte IPC
│ └── cli/ Ferramenta CLI — comando `op`
│ ├── src/commands/ Comandos de design, documento, exportação, importação, nó, página, variável
│ ├── connection.ts Conexão WebSocket com o app em execução
│ └── launcher.ts Detecção automática e inicialização do app desktop ou servidor web
├── packages/
│ ├── pen-types/ Definições de tipos para o modelo PenDocument
│ ├── pen-core/ Operações de árvore de documento, motor de layout, variáveis
│ ├── pen-codegen/ Geradores de código (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Parser e conversor de arquivos .fig do Figma
│ ├── pen-renderer/ Renderizador CanvasKit/Skia independente
│ ├── pen-sdk/ SDK guarda-chuva (re-exporta todos os pacotes)
│ ├── pen-ai-skills/ Engine de skills AI (carregamento de prompts por fases)
│ └── agent/ SDK de agente AI (Vercel AI SDK, multi-provedor, equipes de agentes)
└── .githooks/ Sincronização de versão no pre-commit a partir do nome da branch
├── crates/ Workspace Rust — o produto
│ ├── op-editor-core/ Estado canônico do editor `.op` (PenDocument) + EditorCommand + variáveis de design
│ ├── op-editor-ui/ Widgets independentes de plataforma + fachada RenderBackend (wasm32-clean)
│ ├── op-editor-host-core/ Máquinas de estado de host sem transporte, compartilhadas por todos os hosts
│ ├── op-host-native/ Lib de host nativo — winit + skia-safe GL (desktop + mobile)
│ ├── op-host-web/ Bundle para navegador — cdylib wasm32, renderizador CanvasKit
│ ├── op-host-desktop/ Binário desktop `openpencil-desktop`; também o daemon `--serve-web`
│ ├── op-host-services/ Lib do daemon headless serve-web / MCP
│ ├── op-host-web-server/ Binário web-server enxuto, sem GL
│ ├── op-cli/ Ferramenta CLI — comando `op`
│ ├── op-mcp/ Servidor MCP — ferramentas, design em lote, fluxo em camadas
│ ├── op-ai/ Provedores de IA, runtime de chat, streaming
│ ├── op-ai-skills/ Engine de skills de IA (carregamento de prompts por fases)
│ ├── op-orchestrator/ Orquestração de equipes de agentes concorrentes
│ ├── op-codegen/ Geradores de código (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Parser e conversor de arquivos .fig do Figma
│ ├── op-git/ Integração com Git — clone, branch, push/pull, merge
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Workspace do SDK web (Bun)
│ ├── op-web-sdk/ SDK web viewer `.op` somente leitura (envolve o bundle wasm)
│ ├── op-web-sdk-react/ Adaptador React 19
│ └── op-web-sdk-vue/ Adaptador Vue 3
├── vendor/ Subsistemas vendorizados (submódulos git)
│ ├── jian/ Toolkit de widget/renderização/eventos Skia
│ ├── casement/ Fork do winit
│ └── agent/ Runtime de agente Rust compartilhado entre produtos (agent-rs)
└── .githooks/ Sincronização de versão no pre-commit a partir do nome da branch
```
## Atalhos de Teclado

94
README.ru.md
View file

@ -80,7 +80,7 @@
### 🖥️ Работает везде
Веб-приложение + нативный десктоп на macOS, Windows и Linux через Electron. Автообновление из GitHub Releases. Ассоциация файлов `.op` — двойной клик для открытия.
Веб-приложение + нативный десктоп на macOS, Windows и Linux — единое Rust-ядро, один самодостаточный бинарный файл, без браузерного движка. Ассоциация файлов `.op` — двойной клик для открытия.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP-сервер**
- Встроенный MCP-сервер — установка в один клик в Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- Автоопределение Node.js — если не установлен, автоматический переход на HTTP-транспорт и автозапуск MCP HTTP-сервера
- Встроенный MCP-сервер (крейт `op-mcp`) — установка в один клик в Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- Node.js не требуется — stdio-транспорт через десктопный бинарный файл (`--mcp <path>`), плюс работающий HTTP-эндпоинт (`127.0.0.1:<port>/mcp`) из запущенного приложения
- Автоматизация дизайна из терминала: чтение, создание и изменение файлов `.op` через любой MCP-совместимый агент
- **Послойный рабочий процесс** — `design_skeleton` → `design_content` → `design_refine` для дизайнов высокого качества с несколькими секциями
- **Сегментированное получение промптов** — загружайте только нужные знания о дизайне (schema, layout, roles, icons, planning и т.д.)
@ -275,9 +275,9 @@ cat design.dsl | op design - # Передача через stdin
**Десктопное приложение**
- Нативная поддержка macOS, Windows и Linux через Electron
- Нативная поддержка macOS, Windows и Linux — единый самодостаточный бинарный файл (winit + GPU Skia, без Electron)
- Ассоциация файлов `.op` — двойной клик для открытия, блокировка единственного экземпляра
- Автообновление из GitHub Releases
- Фоновая проверка обновлений через GitHub Releases
- Нативное меню приложения с пунктами «Сохранить как», «Открыть недавние» и диалогом несохранённых изменений при закрытии
- Сохранение списка недавних файлов
@ -285,21 +285,22 @@ cat design.dsl | op design - # Передача через stdin
| | |
| -------------------- | -------------------------------------------------------------------------------- |
| **Фронтенд** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Холст** | CanvasKit/Skia (WASM, GPU-ускорение) |
| **Состояние** | Zustand v5 |
| **Сервер** | Nitro |
| **Десктоп** | Electron 35 |
| **CLI** | `op` — управление из терминала, пакетный DSL дизайна |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Среда выполнения** | Bun · Vite 7 |
| **Формат файла** | `.op` — на основе JSON, удобочитаемый, дружественный к Git |
| **Ядро** | Rust-пространство (`crates/`) — состояние редактора, виджеты, хосты, MCP, AI, кодген |
| **Рендеринг** | GPU Skia везде — `skia-safe` (GL) на нативных платформах, CanvasKit (WASM/WebGL2) в браузере |
| **UI-инструментарий** | jian — вендоренный Rust-инструментарий виджетов/рендеринга/событий (`vendor/jian`) |
| **Оконная система** | winit (вендоренный форк `casement`) |
| **Десктоп** | Нативный бинарный файл `openpencil-desktop` — без браузерного движка |
| **Веб-SDK** | `op-web-sdk` + адаптеры React 19 / Vue 3 — SDK для просмотра `.op` только для чтения (TypeScript) |
| **CLI** | `op` — управление из терминала, пакетный DSL дизайна |
| **AI** | Встроенный рантайм агентов (Rust) · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Линтинг** | clippy · rustfmt (Rust) · oxlint · oxfmt (веб-SDK) |
| **Формат файла** | `.op` — на основе JSON, удобочитаемый, дружественный к Git |
## Почему Rust
OpenPencil переписывается с нуля на **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Сборка на TypeScript + Electron — это то, что доступно сегодня; переписанная версия на Rust — это то, что будет дальше: единое нативное ядро, значительно меньшее и быстрее, работающее на большем количестве платформ из единой кодовой базы.
OpenPencil переписан с нуля на **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Переписывание завершено — редактор на TypeScript + Electron был выведен из эксплуатации в `v0.7.5`, и Rust-пространство в этом репозитории — это и есть продукт: единое нативное ядро, значительно меньшее и быстрее, работающее на большем количестве платформ из единой кодовой базы.
| | TypeScript + Electron (сегодня) | Rust (переписанная версия) |
| | TypeScript + Electron (устарел, `v0.7.5`) | Rust (сегодня) |
| ------------------------ | ---------------------------------------------- | ----------------------------------------------------------------------------- |
| **Рантайм на десктопе** | Electron — включает Chromium + Node.js | Нативное окно (`winit` + GPU Skia), без браузерного движка |
| **Размер на десктопе** | Полный рантайм Chromium при каждой установке | Один самодостаточный бинарный файл — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil переписывается с нуля на **Rust** ([#129](https:
- **Нативная доступность** — AccessKit на macOS, Windows и Linux, плюс DOM-зеркало на вебе, вместо опоры на дерево доступности браузера.
- **Одно типизированное пространство** — хост MCP, CLI, AI-провайдеры, генерация кода, импорт Figma и интеграция с Git — всё в одном Rust-пространстве с контролем цепочки поставок через `cargo-deny` в CI.
> **Статус:** Rust-оболочка находится в активной разработке (см. [Дорожная карта](#дорожная-карта) ниже). До достижения паритета функций для `v0.8.0` загружаемые дистрибутивы выше — это сборка TypeScript + Electron.
> **Статус:** редактор на TypeScript был выведен из эксплуатации в `v0.7.5` и сохранился только в истории git; этот репозиторий — это Rust-пространство. Релиз `v0.8.0` на Rust находится в активной разработке (см. [Дорожная карта](#дорожная-карта) ниже).
## Структура проекта
```text
openpencil/
├── apps/
│ ├── web/ Веб-приложение TanStack Start
│ │ ├── src/
│ │ │ ├── canvas/ Движок CanvasKit/Skia — рисование, синхронизация, раскладка
│ │ │ ├── components/ React UI — редактор, панели, общие диалоги, иконки
│ │ │ ├── services/ai/ AI-чат, оркестратор, генерация дизайна, стриминг
│ │ │ ├── stores/ Zustand — холст, документ, страницы, история, AI
│ │ │ ├── mcp/ Инструменты MCP-сервера для интеграции с внешними CLI
│ │ │ ├── hooks/ Горячие клавиши, перетаскивание файлов, вставка из Figma
│ │ │ └── uikit/ Система переиспользуемых наборов компонентов
│ │ └── server/
│ │ ├── api/ai/ Nitro API — стриминговый чат, генерация, валидация
│ │ └── utils/ Обёртки клиентов Claude CLI, OpenCode, Codex, Copilot
│ ├── desktop/ Десктопное приложение Electron
│ │ ├── main.ts Окно, форк Nitro, нативное меню, автообновление
│ │ ├── ipc-handlers.ts Нативные файловые диалоги, синхронизация темы, настройки IPC
│ │ └── preload.ts IPC-мост
│ └── cli/ CLI-инструмент — команда `op`
│ ├── src/commands/ Команды: дизайн, документ, экспорт, импорт, узлы, страницы, переменные
│ ├── connection.ts WebSocket-соединение с запущенным приложением
│ └── launcher.ts Автоопределение и запуск десктопного приложения или веб-сервера
├── packages/
│ ├── pen-types/ Определения типов для модели PenDocument
│ ├── pen-core/ Операции с деревом документа, движок раскладки, переменные
│ ├── pen-codegen/ Генераторы кода (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Парсер и конвертер файлов Figma .fig
│ ├── pen-renderer/ Автономный рендерер CanvasKit/Skia
│ ├── pen-sdk/ Зонтичный SDK (реэкспортирует все пакеты)
│ ├── pen-ai-skills/ Движок AI-навыков (фазовая загрузка промптов)
│ └── agent/ SDK AI-агента (Vercel AI SDK, мультипровайдер, команды агентов)
└── .githooks/ Pre-commit синхронизация версий из имени ветки
├── crates/ Rust-пространство — продукт
│ ├── op-editor-core/ Каноническое состояние редактора `.op` (PenDocument) + EditorCommand + переменные дизайна
│ ├── op-editor-ui/ Платформонезависимые виджеты + фасад RenderBackend (wasm32-clean)
│ ├── op-editor-host-core/ Транспортонезависимые state machine хостов, общие для всех хостов
│ ├── op-host-native/ Библиотека нативного хоста — winit + skia-safe GL (десктоп + мобильные)
│ ├── op-host-web/ Браузерный бандл — wasm32 cdylib, рендерер CanvasKit
│ ├── op-host-desktop/ Десктопный бинарный файл `openpencil-desktop`; также демон `--serve-web`
│ ├── op-host-services/ Библиотека headless-демона serve-web / MCP
│ ├── op-host-web-server/ Тонкий веб-серверный бинарный файл без GL
│ ├── op-cli/ CLI-инструмент — команда `op`
│ ├── op-mcp/ MCP-сервер — инструменты, пакетный дизайн, послойный рабочий процесс
│ ├── op-ai/ AI-провайдеры, рантайм чата, стриминг
│ ├── op-ai-skills/ Движок AI-навыков (фазовая загрузка промптов)
│ ├── op-orchestrator/ Оркестрация параллельных команд агентов
│ ├── op-codegen/ Генераторы кода (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Парсер и конвертер файлов Figma .fig
│ ├── op-git/ Интеграция с Git — клонирование, ветки, push/pull, слияние
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Пространство веб-SDK (Bun)
│ ├── op-web-sdk/ SDK веб-просмотрщика `.op` только для чтения (обёртка wasm-бандла)
│ ├── op-web-sdk-react/ Адаптер React 19
│ └── op-web-sdk-vue/ Адаптер Vue 3
├── vendor/ Вендоренные подсистемы (git submodules)
│ ├── jian/ Инструментарий виджетов/рендеринга/событий Skia
│ ├── casement/ Форк winit
│ └── agent/ Кроссплатформенный Rust-рантайм агентов (agent-rs)
└── .githooks/ Pre-commit синхронизация версий из имени ветки
```
## Горячие клавиши

98
README.th.md
View file

@ -80,7 +80,7 @@ Orchestrator แบ่งหน้าที่ซับซ้อนออกเ
### 🖥️ ใช้งานได้ทุกที่
เว็บแอป + เดสก์ท็อปแบบ native บน macOS, Windows และ Linux ผ่าน Electron อัปเดตอัตโนมัติจาก GitHub Releases เชื่อมโยงไฟล์ `.op` — ดับเบิลคลิกเพื่อเปิด
เว็บแอป + เดสก์ท็อปแบบ native บน macOS, Windows และ Linux — Rust core เดียว, binary แบบ self-contained เดียว ไม่มี browser engine เชื่อมโยงไฟล์ `.op` — ดับเบิลคลิกเพื่อเปิด
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP Server**
- MCP Server ในตัว — ติดตั้งได้ด้วยคลิกเดียวใน Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- ตรวจจับ Node.js อัตโนมัติ — หากไม่ได้ติดตั้ง จะสำรองไปใช้ HTTP transport และเริ่ม MCP HTTP server โดยอัตโนมัติ
- MCP Server ในตัว (`op-mcp` crate) — ติดตั้งได้ด้วยคลิกเดียวใน Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
- ไม่ต้องใช้ Node.js — stdio transport ผ่าน binary เดสก์ท็อป (`--mcp <path>`) พร้อม live HTTP endpoint (`127.0.0.1:<port>/mcp`) จากแอปที่กำลังทำงาน
- การทำ Design automation จาก terminal: อ่าน สร้าง และแก้ไขไฟล์ `.op` ผ่าน agent ที่รองรับ MCP
- **Layered design workflow** — `design_skeleton` → `design_content` → `design_refine` สำหรับดีไซน์หลายส่วนที่มีความละเอียดสูงขึ้น
- **Segmented prompt retrieval** — โหลดเฉพาะความรู้ด้านดีไซน์ที่ต้องการ (schema, layout, roles, icons, planning ฯลฯ)
@ -275,31 +275,32 @@ cat design.dsl | op design - # Pipe จาก stdin
**Desktop App**
- รองรับ macOS, Windows และ Linux แบบ native ผ่าน Electron
- รองรับ macOS, Windows และ Linux แบบ native — binary แบบ self-contained เดียว (winit + GPU Skia, ไม่มี Electron)
- เชื่อมโยงไฟล์ `.op` — ดับเบิลคลิกเพื่อเปิด, single-instance lock
- อัปเดตอัตโนมัติจาก GitHub Releases
- ตรวจสอบอัปเดตแบบเบื้องหลังจาก GitHub Releases
- เมนูแอปพลิเคชันแบบ native พร้อม Save As, Open Recent และกล่องโต้ตอบการเปลี่ยนแปลงที่ไม่ได้บันทึกเมื่อปิด
- การเก็บรักษาไฟล์ล่าสุด
## Tech Stack
| | |
| -------------- | -------------------------------------------------------------------------------- |
| **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Canvas** | CanvasKit/Skia (WASM, GPU-accelerated) |
| **State** | Zustand v5 |
| **Server** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — ควบคุมจาก terminal, batch design DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **รูปแบบไฟล์** | `.op` — ใช้ JSON, อ่านได้โดยมนุษย์, Git-friendly |
| | |
| -------------- | ---------------------------------------------------------------------------------------- |
| **Core** | Rust workspace (`crates/`) — editor state, widgets, hosts, MCP, AI, codegen |
| **Rendering** | GPU Skia ทุกที่ — `skia-safe` (GL) บน native, CanvasKit (WASM/WebGL2) บนเบราว์เซอร์ |
| **UI toolkit** | jian — Rust widget/render/event toolkit แบบ vendored (`vendor/jian`) |
| **Windowing** | winit (vendored `casement` fork) |
| **Desktop** | Native binary `openpencil-desktop` — ไม่มี browser engine |
| **Web SDK** | `op-web-sdk` + React 19 / Vue 3 adapters — `.op` viewer แบบอ่านอย่างเดียว (TypeScript) |
| **CLI** | `op` — ควบคุมจาก terminal, batch design DSL |
| **AI** | Agent runtime ในตัว (Rust) · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK) |
| **รูปแบบไฟล์** | `.op` — ใช้ JSON, อ่านได้โดยมนุษย์, Git-friendly |
## ทำไมต้อง Rust
OpenPencil กำลังถูกเขียนใหม่ตั้งแต่ต้นด้วย **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)) บิลด์ TypeScript + Electron คือสิ่งที่จัดจำหน่ายในปัจจุบัน ส่วนการเขียนใหม่ด้วย Rust คือก้าวต่อไป — core แบบ native เดียวที่เล็กและเร็วกว่าอย่างเห็นได้ชัด และรองรับได้บนหลายแพลตฟอร์มจาก codebase เดียว
OpenPencil ถูกเขียนใหม่ตั้งแต่ต้นด้วย **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)) การเขียนใหม่เสร็จสมบูรณ์แล้ว — editor แบบ TypeScript + Electron ถูกเลิกใช้ที่ `v0.7.5` และ Rust workspace ในรีโปนี้คือตัวผลิตภัณฑ์: core แบบ native เดียวที่เล็กและเร็วกว่าอย่างเห็นได้ชัด และรองรับได้บนหลายแพลตฟอร์มจาก codebase เดียว
| | TypeScript + Electron (ปัจจุบัน) | Rust (การเขียนใหม่) |
| | TypeScript + Electron (เลิกใช้แล้ว, `v0.7.5`) | Rust (ปัจจุบัน) |
| ---------------------- | --------------------------------------------- | -------------------------------------------------------------------- |
| **Desktop runtime** | Electron — รวม Chromium + Node.js | หน้าต่างแบบ native (`winit` + GPU Skia) ไม่มี browser engine |
| **ขนาดบน Desktop** | Chromium runtime เต็มรูปแบบต่อการติดตั้ง | ไฟล์ binary เดียวที่พร้อมใช้งาน — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil กำลังถูกเขียนใหม่ตั้งแต
- **Accessibility แบบ native** — AccessKit บน macOS, Windows และ Linux พร้อม DOM mirror บนเว็บ แทนที่จะพึ่งพา a11y tree ของ browser
- **Workspace ที่ตรวจสอบ type เดียว** — MCP host, CLI, AI providers, code generation, Figma import และ Git integration ทั้งหมดอยู่ใน Rust workspace เดียว พร้อม `cargo-deny` ตรวจสอบ supply-chain ใน CI
> **สถานะ:** Rust shell อยู่ระหว่างการพัฒนาอย่างต่อเนื่อง (ดู Roadmap ด้านล่าง) จนกว่าจะถึง feature parity สำหรับ `v0.8.0` ไฟล์ที่ดาวน์โหลดได้ข้างต้นคือบิลด์ TypeScript + Electron
> **สถานะ:** editor แบบ TypeScript ถูกเลิกใช้ที่ `v0.7.5` และเหลืออยู่เพียงใน git history เท่านั้น รีโปนี้คือ Rust workspace รุ่น Rust `v0.8.0` อยู่ระหว่างการพัฒนาอย่างต่อเนื่อง (ดู Roadmap ด้านล่าง)
## โครงสร้างโปรเจกต์
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start web app
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia engine — การวาด, sync, layout
│ │ │ ├── components/ React UI — editor, panels, shared dialogs, icons
│ │ │ ├── services/ai/ AI chat, orchestrator, การสร้างดีไซน์, streaming
│ │ │ ├── stores/ Zustand — canvas, document, pages, history, AI
│ │ │ ├── mcp/ MCP server tools สำหรับการเชื่อมต่อ CLI ภายนอก
│ │ │ ├── hooks/ Keyboard shortcuts, file drop, Figma paste
│ │ │ └── uikit/ ระบบ component kit ที่นำกลับมาใช้ใหม่ได้
│ │ └── server/
│ │ ├── api/ai/ Nitro API — streaming chat, generation, validation
│ │ └── utils/ Claude CLI, OpenCode, Codex, Copilot wrappers
│ ├── desktop/ Electron desktop app
│ │ ├── main.ts Window, Nitro fork, native menu, auto-updater
│ │ ├── ipc-handlers.ts ไดอะล็อกไฟล์เนทีฟ, ซิงค์ธีม, การตั้งค่า IPC
│ │ └── preload.ts IPC bridge
│ └── cli/ เครื่องมือ CLI — คำสั่ง `op`
│ ├── src/commands/ คำสั่ง design, document, export, import, node, page, variable
│ ├── connection.ts การเชื่อมต่อ WebSocket ไปยังแอปที่กำลังทำงาน
│ └── launcher.ts ตรวจจับและเปิดแอปเดสก์ท็อปหรือ web server อัตโนมัติ
├── packages/
│ ├── pen-types/ Type definitions สำหรับ PenDocument model
│ ├── pen-core/ Document tree ops, layout engine, variables
│ ├── pen-codegen/ Code generators (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Figma .fig file parser และ converter
│ ├── pen-renderer/ Standalone CanvasKit/Skia renderer
│ ├── pen-sdk/ Umbrella SDK (re-exports ทุก package)
│ ├── pen-ai-skills/ AI prompt skill engine (โหลด prompt ตามเฟส)
│ └── agent/ AI Agent SDK (Vercel AI SDK, หลายผู้ให้บริการ, ทีม Agent)
└── .githooks/ Pre-commit version sync จาก branch name
├── crates/ Rust workspace — ตัวผลิตภัณฑ์
│ ├── op-editor-core/ Editor state ของ `.op` (PenDocument) ที่เป็นแหล่งจริง + EditorCommand + design variables
│ ├── op-editor-ui/ Widget ที่ไม่ผูกกับแพลตฟอร์ม + RenderBackend facade (wasm32-clean)
│ ├── op-editor-host-core/ Host state machine ที่ไม่ผูกกับ transport ใช้ร่วมกันทุก host
│ ├── op-host-native/ Native host lib — winit + skia-safe GL (เดสก์ท็อป + มือถือ)
│ ├── op-host-web/ Browser bundle — wasm32 cdylib, CanvasKit renderer
│ ├── op-host-desktop/ Desktop binary `openpencil-desktop`; เป็น daemon `--serve-web` ด้วย
│ ├── op-host-services/ Headless serve-web / MCP daemon lib
│ ├── op-host-web-server/ Web-server binary แบบไม่มี GL
│ ├── op-cli/ เครื่องมือ CLI — คำสั่ง `op`
│ ├── op-mcp/ MCP server — tools, batch design, layered workflow
│ ├── op-ai/ AI providers, chat runtime, streaming
│ ├── op-ai-skills/ AI prompt skill engine (โหลด prompt ตามเฟส)
│ ├── op-orchestrator/ การจัดการทีม agent ที่ทำงานพร้อมกัน
│ ├── op-codegen/ Code generators (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Figma .fig file parser และ converter
│ ├── op-git/ การเชื่อมต่อ Git — clone, branch, push/pull, merge
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web SDK workspace (Bun)
│ ├── op-web-sdk/ `.op` web viewer SDK แบบอ่านอย่างเดียว (wrap wasm bundle)
│ ├── op-web-sdk-react/ React 19 adapter
│ └── op-web-sdk-vue/ Vue 3 adapter
├── vendor/ Subsystem แบบ vendored (git submodules)
│ ├── jian/ Skia widget/render/event toolkit
│ ├── casement/ winit fork
│ └── agent/ Rust agent runtime ข้ามผลิตภัณฑ์ (agent-rs)
└── .githooks/ Pre-commit version sync จาก branch name
```
## คีย์ลัด

98
README.tr.md
View file

@ -80,7 +80,7 @@ Claude Code, Codex, Gemini, OpenCode, Kiro veya Copilot CLI'larına tek tıkla k
### 🖥️ Her Yerde Çalışır
Web uygulaması + Electron ile macOS, Windows ve Linux'ta yerel masaüstü. GitHub Releases'ten otomatik güncelleme. `.op` dosya ilişkilendirmesi — açmak için çift tıklayın.
Web uygulaması + macOS, Windows ve Linux'ta yerel masaüstü — tek bir Rust çekirdeği, tek bir bağımsız ikili, tarayıcı motoru yok. `.op` dosya ilişkilendirmesi — açmak için çift tıklayın.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP Sunucusu**
- Yerleşik MCP sunucusu — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI'larına tek tıkla kurulum
- Otomatik Node.js algılama — kurulu değilse otomatik olarak HTTP aktarımına geçer ve MCP HTTP sunucusunu otomatik başlatır
- Yerleşik MCP sunucusu (`op-mcp` crate) — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI'larına tek tıkla kurulum
- Node.js gerekmez — masaüstü ikili dosyası aracılığıyla stdio aktarımı (`--mcp <path>`), ayrıca çalışan uygulamadan canlı bir HTTP uç noktası (`127.0.0.1:<port>/mcp`)
- Terminalden tasarım otomasyonu: herhangi bir MCP uyumlu ajan aracılığıyla `.op` dosyalarını okuyun, oluşturun ve düzenleyin
- **Katmanlı tasarım iş akışı** — daha yüksek kaliteli çok bölümlü tasarımlar için `design_skeleton` → `design_content` → `design_refine`
- **Bölümlenmiş prompt alımı** — yalnızca ihtiyacınız olan tasarım bilgisini yükleyin (şema, düzen, roller, simgeler, planlama vb.)
@ -275,31 +275,32 @@ cat design.dsl | op design - # stdin'den pipe ile besle
**Masaüstü Uygulaması**
- Electron aracılığıyla yerel macOS, Windows ve Linux desteği
- Yerel macOS, Windows ve Linux desteği — tek bir bağımsız ikili (winit + GPU Skia, Electron yok)
- `.op` dosya ilişkilendirmesi — açmak için çift tıklayın, tekli örnek kilidi
- GitHub Releases'ten otomatik güncelleme
- GitHub Releases'e karşı arka planda güncelleme kontrolü
- Farklı Kaydet, Son Kullanılanları Aç ve kapatırken kaydedilmemiş değişiklikler iletişim kutusu içeren yerel uygulama menüsü
- Son kullanılan dosyaların kalıcılığı
## Teknoloji Yığını
| | |
| ------------------ | -------------------------------------------------------------------------------- |
| **Ön Uç** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Kanvas** | CanvasKit/Skia (WASM, GPU hızlandırmalı) |
| **Durum Yönetimi** | Zustand v5 |
| **Sunucu** | Nitro |
| **Masaüstü** | Electron 35 |
| **CLI** | `op` — terminal kontrolü, toplu tasarım DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Çalışma Ortamı** | Bun · Vite 7 |
| **Dosya Formatı** | `.op` — JSON tabanlı, insan tarafından okunabilir, Git dostu |
| | |
| ----------------------- | -------------------------------------------------------------------------------- |
| **Çekirdek** | Rust çalışma alanı (`crates/`) — editör durumu, widget'lar, host'lar, MCP, AI, codegen |
| **Görüntü İşleme** | Her yerde GPU Skia — yerelde `skia-safe` (GL), tarayıcıda CanvasKit (WASM/WebGL2) |
| **Arayüz Araç Seti** | jian — vendored Rust widget/render/event araç seti (`vendor/jian`) |
| **Pencere Yönetimi** | winit (vendored `casement` çatalı) |
| **Masaüstü** | Yerel ikili `openpencil-desktop` — tarayıcı motoru yok |
| **Web SDK** | `op-web-sdk` + React 19 / Vue 3 adaptörleri — salt okunur `.op` görüntüleyici (TypeScript) |
| **CLI** | `op` — terminal kontrolü, toplu tasarım DSL |
| **AI** | Yerleşik Rust ajan çalışma ortamı · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK) |
| **Dosya Formatı** | `.op` — JSON tabanlı, insan tarafından okunabilir, Git dostu |
## Neden Rust
OpenPencil, sıfırdan **Rust** ile yeniden yazılıyor ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). TypeScript + Electron derlemesi bugün dağıtılan sürümdür; Rust yeniden yazımı ise bir sonraki adımdır — tek bir doğal çekirdek: çok daha küçük, çok daha hızlı ve tek bir kod tabanından daha fazla platformda çalışır.
OpenPencil, sıfırdan **Rust** ile yeniden yazıldı ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Yeniden yazım tamamlandı — TypeScript + Electron editörü `v0.7.5` sürümünde kullanımdan kaldırıldı ve bu depodaki Rust çalışma alanı artık ürünün kendisidir: tek bir doğal çekirdek, çok daha küçük, çok daha hızlı ve tek bir kod tabanından daha fazla platformda çalışır.
| | TypeScript + Electron (bugün) | Rust (yeniden yazım) |
| | TypeScript + Electron (kullanımdan kaldırıldı, `v0.7.5`) | Rust (bugün) |
| ------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------ |
| **Masaüstü çalışma ortamı** | Electron — Chromium + Node.js içerir | Yerel pencere (`winit` + GPU Skia), tarayıcı motoru yok |
| **Masaüstü boyutu** | Kurulum başına tam Chromium çalışma ortamı | Tek, bağımsız ikili — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil, sıfırdan **Rust** ile yeniden yazılıyor ([#129](https://github.c
- **Yerel erişilebilirlik** — tarayıcının a11y ağacına güvenmek yerine macOS, Windows ve Linux'ta AccessKit; web'de ise bir DOM aynası.
- **Tek tip denetimli çalışma alanı** — MCP sunucusu, CLI, AI sağlayıcıları, kod üretimi, Figma içe aktarma ve Git entegrasyonu; CI'da `cargo-deny` tedarik zinciri denetimi ile tek bir Rust çalışma alanında bulunur.
> **Durum:** Rust kabuğu etkin geliştirme aşamasındadır (aşağıdaki Yol Haritası'na bakın). `v0.8.0` için özellik eşitliğine ulaşana kadar yukarıdaki indirilebilir dosyalar TypeScript + Electron derlemesidir.
> **Durum:** TypeScript editörü `v0.7.5` sürümünde kullanımdan kaldırıldı ve yalnızca git geçmişinde bulunuyor; bu depo artık Rust çalışma alanıdır. `v0.8.0` Rust sürümü etkin geliştirme aşamasındadır (aşağıdaki Yol Haritası'na bakın).
## Proje Yapısı
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start web uygulaması
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia motoru — çizim, senkronizasyon, düzen
│ │ │ ├── components/ React UI — editör, paneller, paylaşılan iletişim kutuları, simgeler
│ │ │ ├── services/ai/ AI sohbet, orkestratör, tasarım üretimi, akış
│ │ │ ├── stores/ Zustand — kanvas, belge, sayfalar, geçmiş, AI
│ │ │ ├── mcp/ Harici CLI entegrasyonu için MCP sunucu araçları
│ │ │ ├── hooks/ Klavye kısayolları, dosya bırakma, Figma yapıştırma
│ │ │ └── uikit/ Yeniden kullanılabilir bileşen kiti sistemi
│ │ └── server/
│ │ ├── api/ai/ Nitro API — akış sohbet, üretim, doğrulama
│ │ └── utils/ Claude CLI, OpenCode, Codex, Copilot sarmalayıcıları
│ ├── desktop/ Electron masaüstü uygulaması
│ │ ├── main.ts Pencere, Nitro çatallanması, yerel menü, otomatik güncelleyici
│ │ ├── ipc-handlers.ts Yerel dosya diyalogları, tema senkronizasyonu, tercihler IPC
│ │ └── preload.ts IPC köprüsü
│ └── cli/ CLI aracı — `op` komutu
│ ├── src/commands/ Tasarım, belge, dışa aktarma, içe aktarma, düğüm, sayfa, değişken komutları
│ ├── connection.ts Çalışan uygulamaya WebSocket bağlantısı
│ └── launcher.ts Masaüstü uygulamayı veya web sunucusunu otomatik algıla ve başlat
├── packages/
│ ├── pen-types/ PenDocument modeli için tür tanımları
│ ├── pen-core/ Belge ağacı işlemleri, düzen motoru, değişkenler
│ ├── pen-codegen/ Kod oluşturucular (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Figma .fig dosya ayrıştırıcı ve dönüştürücü
│ ├── pen-renderer/ Bağımsız CanvasKit/Skia işleyici
│ ├── pen-sdk/ Şemsiye SDK (tüm paketleri yeniden dışa aktarır)
│ ├── pen-ai-skills/ AI prompt beceri motoru (aşamalı prompt yükleme)
│ └── agent/ AI ajan SDK'sı (Vercel AI SDK, çoklu sağlayıcı, ajan ekipleri)
└── .githooks/ Dal adından ön-commit sürüm eşitleme
├── crates/ Rust çalışma alanı — ürünün kendisi
│ ├── op-editor-core/ Standart `.op` (PenDocument) editör durumu + EditorCommand + tasarım değişkenleri
│ ├── op-editor-ui/ Platformdan bağımsız widget'lar + RenderBackend arayüzü (wasm32 uyumlu)
│ ├── op-editor-host-core/ Tüm host'lar tarafından paylaşılan, taşımadan bağımsız host durum makineleri
│ ├── op-host-native/ Yerel host kütüphanesi — winit + skia-safe GL (masaüstü + mobil)
│ ├── op-host-web/ Tarayıcı paketi — wasm32 cdylib, CanvasKit işleyici
│ ├── op-host-desktop/ Masaüstü ikili dosyası `openpencil-desktop`; ayrıca `--serve-web` daemon'ı
│ ├── op-host-services/ Headless serve-web / MCP daemon kütüphanesi
│ ├── op-host-web-server/ GL içermeyen ince web sunucusu ikili dosyası
│ ├── op-cli/ CLI aracı — `op` komutu
│ ├── op-mcp/ MCP sunucusu — araçlar, toplu tasarım, katmanlı iş akışı
│ ├── op-ai/ AI sağlayıcıları, sohbet çalışma ortamı, akış
│ ├── op-ai-skills/ AI prompt beceri motoru (aşamalı prompt yükleme)
│ ├── op-orchestrator/ Eşzamanlı ajan ekibi orkestrasyonu
│ ├── op-codegen/ Kod oluşturucular (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Figma .fig dosya ayrıştırıcı ve dönüştürücü
│ ├── op-git/ Git entegrasyonu — klonlama, dal, push/pull, birleştirme
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web SDK çalışma alanı (Bun)
│ ├── op-web-sdk/ Salt okunur `.op` web görüntüleyici SDK'sı (wasm paketini sarmalar)
│ ├── op-web-sdk-react/ React 19 adaptörü
│ └── op-web-sdk-vue/ Vue 3 adaptörü
├── vendor/ Vendored alt sistemler (git submodule'ları)
│ ├── jian/ Skia widget/render/event araç seti
│ ├── casement/ winit çatalı
│ └── agent/ Ürünler arası Rust ajan çalışma ortamı (agent-rs)
└── .githooks/ Dal adından ön-commit sürüm eşitleme
```
## Klavye Kısayolları

98
README.vi.md
View file

@ -80,7 +80,7 @@ Tệp `.op` là JSON — dễ đọc, thân thiện Git, dễ so sánh khác bi
### 🖥️ Chạy Mọi nơi
Ứng dụng web + desktop gốc trên macOS, Windows và Linux qua Electron. Tự động cập nhật từ GitHub Releases. Liên kết tệp `.op` — nhấp đúp để mở.
Ứng dụng web + desktop gốc trên macOS, Windows và Linux — một nhân Rust duy nhất, một tệp nhị phân độc lập duy nhất, không có browser engine. Liên kết tệp `.op` — nhấp đúp để mở.
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**Máy chủ MCP**
- Máy chủ MCP tích hợp sẵn — cài đặt một cú nhấp vào Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- Tự động phát hiện Node.js — nếu chưa cài đặt, tự động chuyển sang HTTP transport và khởi động MCP HTTP server
- Máy chủ MCP tích hợp sẵn (crate `op-mcp`) — cài đặt một cú nhấp vào Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- Không cần Node.js — stdio transport qua tệp nhị phân desktop (`--mcp <path>`), cộng với một HTTP endpoint trực tiếp (`127.0.0.1:<port>/mcp`) từ ứng dụng đang chạy
- Tự động hóa thiết kế từ terminal: đọc, tạo và chỉnh sửa các tệp `.op` qua bất kỳ tác nhân tương thích MCP nào
- **Quy trình thiết kế phân lớp** — `design_skeleton` → `design_content` → `design_refine` cho thiết kế đa phần có độ trung thực cao hơn
- **Truy xuất prompt phân đoạn** — chỉ tải kiến thức thiết kế cần thiết (schema, layout, roles, icons, planning, v.v.)
@ -275,31 +275,32 @@ Hỗ trợ ba phương thức nhập liệu: chuỗi inline, `@filepath` (đọc
**Ứng dụng Desktop**
- macOS, Windows và Linux gốc qua Electron
- macOS, Windows và Linux gốc — một tệp nhị phân độc lập duy nhất (winit + GPU Skia, không có Electron)
- Liên kết tệp `.op` — nhấp đúp để mở, khóa phiên bản đơn
- Tự động cập nhật từ GitHub Releases
- Kiểm tra cập nhật nền so với GitHub Releases
- Menu ứng dụng gốc với Lưu thành, Mở gần đây và hộp thoại thay đổi chưa lưu khi đóng
- Lưu danh sách tệp gần đây
## Công nghệ
| | |
| ----------------- | -------------------------------------------------------------------------------- |
| **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **Canvas** | CanvasKit/Skia (WASM, tăng tốc GPU) |
| **Trạng thái** | Zustand v5 |
| **Máy chủ** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — điều khiển từ terminal, batch design DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Định dạng tệp** | `.op` — dựa trên JSON, dễ đọc, thân thiện với Git |
| | |
| ------------------ | ------------------------------------------------------------------------------------------- |
| **Lõi** | Rust workspace (`crates/`) — trạng thái editor, widget, host, MCP, AI, codegen |
| **Dựng hình** | GPU Skia ở khắp nơi — `skia-safe` (GL) trên nền tảng gốc, CanvasKit (WASM/WebGL2) trên trình duyệt |
| **Bộ công cụ UI** | jian — bộ công cụ widget/render/event Rust được vendor hóa (`vendor/jian`) |
| **Cửa sổ** | winit (bản fork `casement` được vendor hóa) |
| **Desktop** | Tệp nhị phân gốc `openpencil-desktop` — không có browser engine |
| **Web SDK** | `op-web-sdk` + các adapter React 19 / Vue 3 — trình xem `.op` chỉ đọc (TypeScript) |
| **CLI** | `op` — điều khiển từ terminal, batch design DSL |
| **AI** | Runtime tác nhân Rust tích hợp sẵn · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK) |
| **Định dạng tệp** | `.op` — dựa trên JSON, dễ đọc, thân thiện với Git |
## Tại sao chọn Rust
OpenPencil đang được viết lại từ đầu bằng **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Bản dựng TypeScript + Electron là phiên bản đang phát hành hiện tại; bản viết lại bằng Rust là bước tiếp theo — một nhân gốc duy nhất nhỏ hơn và nhanh hơn đáng kể, chạy trên nhiều nền tảng hơn từ một codebase duy nhất.
OpenPencil đã được viết lại từ đầu bằng **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). Việc viết lại đã hoàn tất — editor TypeScript + Electron đã bị khai tử tại `v0.7.5`, và Rust workspace trong repo này chính là sản phẩm: một nhân gốc duy nhất nhỏ hơn và nhanh hơn đáng kể, chạy trên nhiều nền tảng hơn từ một codebase duy nhất.
| | TypeScript + Electron (hiện tại) | Rust (bản viết lại) |
| | TypeScript + Electron (đã khai tử, `v0.7.5`) | Rust (hiện tại) |
| ---------------------------- | ---------------------------------------------- | -------------------------------------------------------------------- |
| **Runtime desktop** | Electron — đi kèm Chromium + Node.js | Cửa sổ gốc (`winit` + GPU Skia), không có browser engine |
| **Dung lượng desktop** | Toàn bộ runtime Chromium mỗi lần cài đặt | Tệp nhị phân độc lập duy nhất — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil đang được viết lại từ đầu bằng **Rust** ([#129](https
- **Trợ năng gốc** — AccessKit trên macOS, Windows và Linux, cộng với DOM mirror trên web, thay vì dựa vào cây a11y của browser.
- **Một workspace có kiểm tra kiểu** — MCP host, CLI, nhà cung cấp AI, tạo mã, nhập Figma và tích hợp Git đều nằm trong một Rust workspace duy nhất, với `cargo-deny` kiểm soát chuỗi cung ứng trong CI.
> **Trạng thái:** shell Rust đang được phát triển tích cực (xem Lộ trình bên dưới). Cho đến khi đạt tính năng tương đương cho `v0.8.0`, các bản tải xuống có thể cài đặt ở trên là bản dựng TypeScript + Electron.
> **Trạng thái:** editor TypeScript đã bị khai tử tại `v0.7.5` và chỉ còn tồn tại trong lịch sử git; repo này chính là Rust workspace. Bản phát hành Rust `v0.8.0` đang được phát triển tích cực (xem Lộ trình bên dưới).
## Cấu trúc dự án
```text
openpencil/
├── apps/
│ ├── web/ Ứng dụng web TanStack Start
│ │ ├── src/
│ │ │ ├── canvas/ Engine CanvasKit/Skia — vẽ, đồng bộ, layout
│ │ │ ├── components/ React UI — editor, panels, hộp thoại dùng chung, icons
│ │ │ ├── services/ai/ AI chat, orchestrator, tạo thiết kế, streaming
│ │ │ ├── stores/ Zustand — canvas, document, pages, history, AI
│ │ │ ├── mcp/ Công cụ máy chủ MCP để tích hợp CLI bên ngoài
│ │ │ ├── hooks/ Phím tắt, kéo thả tệp, dán từ Figma
│ │ │ └── uikit/ Hệ thống kit component có thể tái sử dụng
│ │ └── server/
│ │ ├── api/ai/ Nitro API — streaming chat, generation, validation
│ │ └── utils/ Claude CLI, OpenCode, Codex, Copilot wrappers
│ ├── desktop/ Ứng dụng desktop Electron
│ │ ├── main.ts Cửa sổ, Nitro fork, menu gốc, auto-updater
│ │ ├── ipc-handlers.ts Hộp thoại file gốc, đồng bộ theme, tùy chọn IPC
│ │ └── preload.ts IPC bridge
│ └── cli/ Công cụ CLI — lệnh `op`
│ ├── src/commands/ Lệnh design, document, export, import, node, page, variable
│ ├── connection.ts Kết nối WebSocket đến ứng dụng đang chạy
│ └── launcher.ts Tự động phát hiện và khởi chạy ứng dụng desktop hoặc web server
├── packages/
│ ├── pen-types/ Định nghĩa kiểu cho mô hình PenDocument
│ ├── pen-core/ Thao tác cây tài liệu, layout engine, biến
│ ├── pen-codegen/ Bộ tạo mã (React, HTML, Vue, Flutter, ...)
│ ├── pen-figma/ Trình phân tích và chuyển đổi tệp Figma .fig
│ ├── pen-renderer/ Bộ dựng hình CanvasKit/Skia độc lập
│ ├── pen-sdk/ SDK tổng hợp (tái xuất tất cả các gói)
│ ├── pen-ai-skills/ Engine kỹ năng AI prompt (tải prompt theo giai đoạn)
│ └── agent/ SDK tác nhân AI (Vercel AI SDK, đa nhà cung cấp, đội tác nhân)
└── .githooks/ Pre-commit đồng bộ phiên bản từ tên nhánh
├── crates/ Rust workspace — sản phẩm chính
│ ├── op-editor-core/ Trạng thái editor `.op` (PenDocument) chuẩn + EditorCommand + biến thiết kế
│ ├── op-editor-ui/ Widget không phụ thuộc nền tảng + RenderBackend facade (wasm32-clean)
│ ├── op-editor-host-core/ Máy trạng thái host không phụ thuộc transport, dùng chung cho mọi host
│ ├── op-host-native/ Thư viện host gốc — winit + skia-safe GL (desktop + mobile)
│ ├── op-host-web/ Bundle trình duyệt — wasm32 cdylib, renderer CanvasKit
│ ├── op-host-desktop/ Binary desktop `openpencil-desktop`; đồng thời là daemon `--serve-web`
│ ├── op-host-services/ Thư viện daemon serve-web / MCP headless
│ ├── op-host-web-server/ Binary web-server không cần GL
│ ├── op-cli/ Công cụ CLI — lệnh `op`
│ ├── op-mcp/ Máy chủ MCP — công cụ, batch design, quy trình phân lớp
│ ├── op-ai/ Nhà cung cấp AI, runtime chat, streaming
│ ├── op-ai-skills/ Engine kỹ năng AI prompt (tải prompt theo giai đoạn)
│ ├── op-orchestrator/ Điều phối đội tác nhân đồng thời
│ ├── op-codegen/ Bộ tạo mã (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Trình phân tích và chuyển đổi tệp Figma .fig
│ ├── op-git/ Tích hợp Git — clone, branch, push/pull, merge
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web SDK workspace (Bun)
│ ├── op-web-sdk/ SDK trình xem web `.op` chỉ đọc (bọc bundle wasm)
│ ├── op-web-sdk-react/ Adapter React 19
│ └── op-web-sdk-vue/ Adapter Vue 3
├── vendor/ Các subsystem được vendor hóa (git submodules)
│ ├── jian/ Bộ công cụ widget/render/event Skia
│ ├── casement/ Bản fork của winit
│ └── agent/ Runtime tác nhân Rust đa sản phẩm (agent-rs)
└── .githooks/ Pre-commit đồng bộ phiên bản từ tên nhánh
```
## Phím tắt

98
README.zh-TW.md
View file

@ -80,7 +80,7 @@
### 🖥️ 隨處執行
Web 應用程式 + 透過 Electron 在 macOS、Windows 和 Linux 上原生執行。從 GitHub Releases 自動更新。`.op` 檔案關聯 — 雙擊即可開啟。
Web 應用程式 + macOS、Windows 和 Linux 上的原生桌面應用程式 — 單一 Rust 核心、單一自包含二進位檔，無需瀏覽器引擎。`.op` 檔案關聯 — 雙擊即可開啟。
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP 伺服器**
- 內建 MCP 伺服器 — 一鍵安裝至 Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- 自動偵測 Node.js — 若未安裝則自動回退到 HTTP 傳輸模式並啟動 MCP HTTP 伺服器
- 內建 MCP 伺服器（`op-mcp` crate）— 一鍵安裝至 Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- 無需 Node.js — 透過桌面二進位檔（`--mcp <path>`）提供 stdio 傳輸，並由執行中的應用程式提供即時 HTTP 端點（`127.0.0.1:<port>/mcp`）
- 從終端機進行設計自動化：透過任意 MCP 相容的智能體讀取、建立和修改 `.op` 檔案
- **分層設計工作流** — `design_skeleton` → `design_content` → `design_refine`，適用於高保真多區塊設計
- **分段提示詞擷取** — 僅載入所需的設計知識（schema、layout、roles、icons、planning 等）
@ -275,31 +275,32 @@ cat design.dsl | op design - # 從 stdin 管道輸入
**桌面應用程式**
- 透過 Electron 支援原生 macOS、Windows 和 Linux
- 原生 macOS、Windows 和 Linux — 單一自包含二進位檔（winit + GPU Skia，無 Electron）
- `.op` 檔案關聯 — 雙擊即可開啟，支援單一實體鎖定
- 從 GitHub Releases 自動更新
- 背景檢查 GitHub Releases 更新
- 原生應用程式選單，支援另存新檔、開啟最近使用，以及關閉時的未儲存變更對話框
- 最近使用檔案持久化
## 技術堆疊
| | |
| ------------ | -------------------------------------------------------------------------------- |
| **前端** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **畫布** | CanvasKit/Skia（WASM、GPU 加速） |
| **狀態管理** | Zustand v5 |
| **伺服器** | Nitro |
| **桌面端** | Electron 35 |
| **CLI** | `op` — 終端機控制、批次設計 DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **執行環境** | Bun · Vite 7 |
| **檔案格式** | `.op` — 基於 JSON，人類可讀，對 Git 友好 |
| | |
| ---------------- | ---------------------------------------------------------------------------------- |
| **核心** | Rust workspace（`crates/`）— 編輯器狀態、widgets、hosts、MCP、AI、程式碼生成 |
| **渲染** | 全平台 GPU Skia — 原生端使用 `skia-safe`（GL），瀏覽器端使用 CanvasKit（WASM/WebGL2）|
| **UI 工具包** | jian — 內建 Rust widget/render/event 工具包（`vendor/jian`） |
| **視窗系統** | winit（vendored `casement` fork） |
| **桌面端** | 原生二進位檔 `openpencil-desktop` — 無需瀏覽器引擎 |
| **Web SDK** | `op-web-sdk` + React 19 / Vue 3 轉接器 — 唯讀 `.op` 檢視器（TypeScript） |
| **CLI** | `op` — 終端機控制、批次設計 DSL |
| **AI** | 內建 Rust Agent 執行環境 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt（Rust）· oxlint · oxfmt（Web SDK） |
| **檔案格式** | `.op` — 基於 JSON，人類可讀，對 Git 友好 |
## 為何選擇 Rust
OpenPencil 正以 **Rust** 從頭重寫（[#129](https://github.com/ZSeven-W/openpencil/issues/129)）。TypeScript + Electron 版本是目前發佈的產品；Rust 重寫版本是下一步——一個原生核心，體積大幅縮小、速度更快，並能從單一程式碼庫支援更多平台。
OpenPencil 已以 **Rust** 從頭重寫完成（[#129](https://github.com/ZSeven-W/openpencil/issues/129)）。重寫工作已經完成——TypeScript + Electron 版本的編輯器已在 `v0.7.5` 退役，本存放庫中的 Rust workspace 就是產品本身：一個原生核心，體積大幅縮小、速度更快，並能從單一程式碼庫支援更多平台。
| | TypeScript + Electron（今日） | Rust（重寫版） |
| | TypeScript + Electron（已退役，`v0.7.5`） | Rust（現行版本） |
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------- |
| **桌面端執行環境** | Electron — 內建 Chromium + Node.js | 原生視窗（`winit` + GPU Skia），無需瀏覽器引擎 |
| **桌面端安裝體積** | 每次安裝包含完整 Chromium 執行環境 | 單一自包含二進位檔 — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil 正以 **Rust** 從頭重寫（[#129](https://github.com/ZSeven-W/ope
- **原生無障礙支援** — 在 macOS、Windows 和 Linux 使用 AccessKit，在 Web 上使用 DOM 鏡像，而非依賴瀏覽器的 a11y 樹狀結構。
- **單一型別檢查 workspace** — MCP 宿主、CLI、AI 供應商、程式碼生成、Figma 匯入和 Git 整合全部位於單一 Rust workspace，並由 CI 中的 `cargo-deny` 進行供應鏈管控。
> **狀態：** Rust shell 正在積極開發中（請見下方路線圖）。在達到 `v0.8.0` 的功能對等之前，上方提供的安裝下載仍為 TypeScript + Electron 版本。
> **狀態：** TypeScript 版編輯器已在 `v0.7.5` 退役，僅存於 Git 歷史紀錄中；本存放庫即為 Rust workspace。`v0.8.0` 的 Rust 版本正在積極開發中（請見下方路線圖）。
## 專案結構
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start Web 應用程式
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia 引擎 — 繪圖、同步、版面配置
│ │ │ ├── components/ React UI — 編輯器、面板、共用對話框、圖示
│ │ │ ├── services/ai/ AI 聊天、編排器、設計生成、串流處理
│ │ │ ├── stores/ Zustand — 畫布、文件、頁面、歷程、AI
│ │ │ ├── mcp/ 供外部 CLI 整合使用的 MCP 伺服器工具
│ │ │ ├── hooks/ 鍵盤快捷鍵、檔案拖放、Figma 貼上
│ │ │ └── uikit/ 可重複使用元件套件系統
│ │ └── server/
│ │ ├── api/ai/ Nitro API — 串流聊天、生成、驗證
│ │ └── utils/ Claude CLI、OpenCode、Codex、Copilot 客戶端封裝
│ ├── desktop/ Electron 桌面應用程式
│ │ ├── main.ts 視窗、Nitro 子處理序、原生選單、自動更新
│ │ ├── ipc-handlers.ts 原生檔案對話框、主題同步、偏好設定 IPC
│ │ └── preload.ts IPC 橋接
│ └── cli/ CLI 工具 — `op` 命令
│ ├── src/commands/ 設計、文件、匯出、匯入、節點、頁面、變數命令
│ ├── connection.ts 與執行中應用程式的 WebSocket 連線
│ └── launcher.ts 自動偵測並啟動桌面應用程式或 Web 伺服器
├── packages/
│ ├── pen-types/ PenDocument 模型型別定義
│ ├── pen-core/ 文件樹操作、版面配置引擎、變數
│ ├── pen-codegen/ 程式碼生成器（React、HTML、Vue、Flutter...）
│ ├── pen-figma/ Figma .fig 檔案解析器與轉換器
│ ├── pen-renderer/ 獨立 CanvasKit/Skia 渲染器
│ ├── pen-sdk/ 整合 SDK（重新匯出所有套件）
│ ├── pen-ai-skills/ AI 提示詞技能引擎（分階段 prompt 載入）
│ └── agent/ AI Agent SDK（Vercel AI SDK、多提供商、Agent 團隊）
└── .githooks/ Pre-commit 版本號同步（從分支名稱）
├── crates/ Rust workspace — 產品本體
│ ├── op-editor-core/ 正典 `.op`（PenDocument）編輯器狀態 + EditorCommand + 設計變數
│ ├── op-editor-ui/ 平台無關的 widgets + RenderBackend facade（wasm32-clean）
│ ├── op-editor-host-core/ 所有 host 共用、與傳輸方式無關的 host 狀態機
│ ├── op-host-native/ 原生 host 函式庫 — winit + skia-safe GL（桌面端 + 行動端）
│ ├── op-host-web/ 瀏覽器套件 — wasm32 cdylib，CanvasKit 渲染器
│ ├── op-host-desktop/ 桌面二進位檔 `openpencil-desktop`；同時也是 `--serve-web` daemon
│ ├── op-host-services/ Headless serve-web / MCP daemon 函式庫
│ ├── op-host-web-server/ 輕量、無 GL 依賴的 web-server 二進位檔
│ ├── op-cli/ CLI 工具 — `op` 命令
│ ├── op-mcp/ MCP 伺服器 — 工具、批次設計、分層工作流
│ ├── op-ai/ AI 提供商、聊天執行環境、串流處理
│ ├── op-ai-skills/ AI 提示詞技能引擎（分階段 prompt 載入）
│ ├── op-orchestrator/ 並行 Agent 團隊編排
│ ├── op-codegen/ 程式碼生成器（React、HTML、Vue、Flutter...）
│ ├── op-figma/ Figma .fig 檔案解析器與轉換器
│ ├── op-git/ Git 整合 — 複製、分支、推送/拉取、合併
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web SDK workspace（Bun）
│ ├── op-web-sdk/ 唯讀 `.op` Web 檢視器 SDK（包裝 wasm 套件）
│ ├── op-web-sdk-react/ React 19 轉接器
│ └── op-web-sdk-vue/ Vue 3 轉接器
├── vendor/ 內建子系統（Git submodules）
│ ├── jian/ Skia widget/render/event 工具包
│ ├── casement/ winit fork
│ └── agent/ 跨產品 Rust Agent 執行環境（agent-rs）
└── .githooks/ Pre-commit 版本號同步（從分支名稱）
```
## 鍵盤快捷鍵

90
README.zh.md
View file

@ -80,7 +80,7 @@
### 🖥️ 全平台运行
Web 应用 + 通过 Electron 支持 macOS、Windows 和 Linux 原生桌面端。从 GitHub Releases 自动更新。`.op` 文件关联 — 双击即可打开。
Web 应用 + macOS、Windows 和 Linux 原生桌面端 — 单一 Rust 核心，单个自包含二进制文件，无需浏览器引擎。`.op` 文件关联 — 双击即可打开。
</td>
</tr>
@ -193,8 +193,8 @@ docker build --target full -t openpencil-full .
**MCP 服务器**
- 内置 MCP 服务器 — 一键安装到 Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- 自动检测 Node.js — 若未安装则自动回退到 HTTP 传输模式并启动 MCP HTTP 服务器
- 内置 MCP 服务器（`op-mcp` crate）— 一键安装到 Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- 无需 Node.js — 通过桌面应用二进制文件（`--mcp <path>`）使用 stdio 传输，运行中的应用还提供实时 HTTP 端点（`127.0.0.1:<port>/mcp`）
- 从终端进行设计自动化：通过任意 MCP 兼容的智能体读取、创建和修改 `.op` 文件
- **分层设计工作流** — `design_skeleton` → `design_content` → `design_refine`，实现更高保真度的多区块设计
- **分段提示词检索** — 按需加载所需的设计知识（schema、layout、roles、icons、planning 等）
@ -275,9 +275,9 @@ cat design.dsl | op design - # 从 stdin 管道输入
**桌面应用**
- 通过 Electron 支持原生 macOS、Windows 和 Linux
- 原生支持 macOS、Windows 和 Linux — 单一自包含二进制文件（winit + GPU Skia，无需 Electron）
- `.op` 文件关联 — 双击即可打开，单实例锁定
- 从 GitHub Releases 自动更新
- 后台检查 GitHub Releases 更新
- 原生应用菜单，支持另存为、打开最近使用，以及关闭时的未保存更改对话框
- 最近使用文件持久化
@ -285,21 +285,22 @@ cat design.dsl | op design - # 从 stdin 管道输入
| | |
| ------------ | -------------------------------------------------------------------------------- |
| **前端** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **画布** | CanvasKit/Skia（WASM, GPU 加速） |
| **状态管理** | Zustand v5 |
| **服务器** | Nitro |
| **桌面端** | Electron 35 |
| **核心** | Rust workspace（`crates/`）— 编辑器状态、组件、宿主、MCP、AI、代码生成 |
| **渲染** | 全平台统一使用 GPU Skia — 原生端 `skia-safe`（GL），浏览器端 CanvasKit（WASM/WebGL2） |
| **UI 工具包** | jian — 内置的 Rust 组件/渲染/事件工具包（`vendor/jian`） |
| **窗口管理** | winit（内置 `casement` fork） |
| **桌面端** | 原生二进制文件 `openpencil-desktop` — 无浏览器引擎 |
| **Web SDK** | `op-web-sdk` + React 19 / Vue 3 适配器 — 只读 `.op` 查看器（TypeScript） |
| **CLI** | `op` — 终端控制、批量设计 DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **运行时** | Bun · Vite 7 |
| **AI** | 内置 Rust Agent 运行时 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **代码检查** | clippy · rustfmt（Rust）· oxlint · oxfmt（web SDK） |
| **文件格式** | `.op` — 基于 JSON，人类可读，对 Git 友好 |
## 为什么选择 Rust
OpenPencil 正在从头用 **Rust** 重写（[#129](https://github.com/ZSeven-W/openpencil/issues/129)）。现阶段发布的安装包是 TypeScript + Electron 版本；Rust 重写版本是下一步目标 — 一个体积更小、速度更快的原生核心，从单一代码库支持更多平台。
OpenPencil 已从头用 **Rust** 完成重写（[#129](https://github.com/ZSeven-W/openpencil/issues/129)）。重写已经完成 — TypeScript + Electron 版编辑器已在 `v0.7.5` 退役，本仓库中的 Rust workspace 就是当前产品本身：一个体积更小、速度更快的原生核心，从单一代码库支持更多平台。
| | TypeScript + Electron（当前） | Rust（重写版） |
| | TypeScript + Electron（已退役，`v0.7.5`） | Rust（当前） |
| ----------------- | ------------------------------------------ | ----------------------------------------------------------------------- |
| **桌面运行时** | Electron — 内置 Chromium + Node.js | 原生窗口（`winit` + GPU Skia），无浏览器引擎 |
| **桌面体积** | 每次安装均含完整 Chromium 运行时 | 单一自包含二进制文件 — **55.5 MB** |
@ -319,43 +320,40 @@ OpenPencil 正在从头用 **Rust** 重写（[#129](https://github.com/ZSeven-W/
- **原生无障碍** — macOS、Windows 和 Linux 上通过 AccessKit 实现，Web 端通过 DOM 镜像实现，而非依赖浏览器自身的无障碍树。
- **单一类型检查工作区** — MCP 宿主、CLI、AI 提供商、代码生成、Figma 导入和 Git 集成全部位于同一个 Rust workspace，并在 CI 中通过 `cargo-deny` 进行供应链管控。
> **状态：** Rust shell 正在积极开发中（参见下方路线图）。在其达到 `v0.8.0` 功能对等之前，上方提供的可安装下载包为 TypeScript + Electron 版本。
> **状态：** TypeScript 版编辑器已在 `v0.7.5` 退役，仅存在于 Git 历史中；本仓库即为 Rust workspace。`v0.8.0` 版本的 Rust 发布正在积极开发中（参见下方路线图）。
## 项目结构
```text
openpencil/
├── apps/
│ ├── web/ TanStack Start Web 应用
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia 引擎 — 绘图、同步、布局
│ │ │ ├── components/ React UI — 编辑器、面板、共享对话框、图标
│ │ │ ├── services/ai/ AI 聊天、编排器、设计生成、流式处理
│ │ │ ├── stores/ Zustand — 画布、文档、页面、历史、AI
│ │ │ ├── mcp/ 供外部 CLI 集成使用的 MCP 服务器工具
│ │ │ ├── hooks/ 键盘快捷键、文件拖放、Figma 粘贴
│ │ │ └── uikit/ 可复用组件套件系统
│ │ └── server/
│ │ ├── api/ai/ Nitro API — 流式聊天、生成、验证
│ │ └── utils/ Claude CLI、OpenCode、Codex、Copilot 客户端封装
│ ├── desktop/ Electron 桌面应用
│ │ ├── main.ts 窗口、Nitro 子进程、原生菜单、自动更新
│ │ ├── ipc-handlers.ts 原生文件对话框、主题同步、偏好设置 IPC
│ │ └── preload.ts IPC 桥接
│ └── cli/ CLI 工具 — `op` 命令
│ ├── src/commands/ 设计、文档、导出、导入、节点、页面、变量命令
│ ├── connection.ts 与运行中应用的 WebSocket 连接
│ └── launcher.ts 自动检测并启动桌面应用或 Web 服务器
├── packages/
│ ├── pen-types/ PenDocument 模型类型定义
│ ├── pen-core/ 文档树操作、布局引擎、变量
│ ├── pen-codegen/ 代码生成器（React、HTML、Vue、Flutter 等）
│ ├── pen-figma/ Figma .fig 文件解析与转换
│ ├── pen-renderer/ 独立 CanvasKit/Skia 渲染器
│ ├── pen-sdk/ 聚合 SDK（重新导出所有包）
│ ├── pen-ai-skills/ AI 提示词技能引擎（分阶段 prompt 加载）
│ └── agent/ AI Agent SDK（Vercel AI SDK、多提供商、Agent 团队）
└── .githooks/ 预提交钩子：从分支名同步版本号
├── crates/ Rust workspace — 产品本体
│ ├── op-editor-core/ 规范的 `.op`（PenDocument）编辑器状态 + EditorCommand + 设计变量
│ ├── op-editor-ui/ 平台无关组件 + RenderBackend 门面（wasm32 兼容）
│ ├── op-editor-host-core/ 所有宿主共用、与传输层无关的宿主状态机
│ ├── op-host-native/ 原生宿主库 — winit + skia-safe GL（桌面端 + 移动端）
│ ├── op-host-web/ 浏览器构建产物 — wasm32 cdylib，CanvasKit 渲染器
│ ├── op-host-desktop/ 桌面应用二进制 `openpencil-desktop`；同时也是 `--serve-web` 守护进程
│ ├── op-host-services/ 无头 serve-web / MCP 守护进程库
│ ├── op-host-web-server/ 无 GL 依赖的轻量级 Web 服务器二进制
│ ├── op-cli/ CLI 工具 — `op` 命令
│ ├── op-mcp/ MCP 服务器 — 工具、批量设计、分层工作流
│ ├── op-ai/ AI 提供商、聊天运行时、流式处理
│ ├── op-ai-skills/ AI 提示词技能引擎（分阶段 prompt 加载）
│ ├── op-orchestrator/ 并发 Agent 团队编排
│ ├── op-codegen/ 代码生成器（React、HTML、Vue、Flutter 等）
│ ├── op-figma/ Figma .fig 文件解析器与转换器
│ ├── op-git/ Git 集成 — 克隆、分支、推送/拉取、合并
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web SDK 工作区（Bun）
│ ├── op-web-sdk/ 只读 `.op` Web 查看器 SDK（封装 wasm 构建产物）
│ ├── op-web-sdk-react/ React 19 适配器
│ └── op-web-sdk-vue/ Vue 3 适配器
├── vendor/ 内置子系统（git 子模块）
│ ├── jian/ Skia 组件/渲染/事件工具包
│ ├── casement/ winit fork
│ └── agent/ 跨产品 Rust Agent 运行时（agent-rs）
└── .githooks/ 预提交钩子：从分支名同步版本号
```
## 键盘快捷键