diff --git a/AGENTS.md b/AGENTS.md index 4775bb181..c596d8671 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -2,7 +2,7 @@ Vue 3 + CanvasKit (Skia WASM) + Yoga WASM design editor. Tauri v2 desktop, also runs in browser. -**Roadmap:** `packages/docs/development/variables-ui-roadmap.md` tracks remaining variable-system UI work. Current architecture and commands live in this file. +**Compatibility tracking:** `packages/docs/development/figma-compatibility.md` tracks known Figma feature gaps and raw metadata coverage. Current architecture and commands live in this file. ## Monorepo diff --git a/packages/docs/.vitepress/root-theme.ts b/packages/docs/.vitepress/root-theme.ts index c3838fc9a..db0ff7dcd 100644 --- a/packages/docs/.vitepress/root-theme.ts +++ b/packages/docs/.vitepress/root-theme.ts @@ -34,7 +34,7 @@ export const rootThemeConfig = (): DefaultTheme.Config => ({ items: [ { text: 'Contributing', link: '/development/contributing' }, { text: 'Testing', link: '/development/testing' }, - { text: 'Roadmap', link: '/development/roadmap' }, + { text: 'Figma Compatibility', link: '/development/figma-compatibility' }, ], }, ], diff --git a/packages/docs/.vitepress/sidebars.ts b/packages/docs/.vitepress/sidebars.ts index 05aa82854..62ebeca59 100644 --- a/packages/docs/.vitepress/sidebars.ts +++ b/packages/docs/.vitepress/sidebars.ts @@ -95,8 +95,6 @@ export const developmentSidebar = (prefix: string, label: string): DefaultTheme. { text: 'Renderer Profiler', link: `${prefix}/development/renderer-profiler` }, { text: 'Figma Compatibility', link: `${prefix}/development/figma-compatibility` }, { text: 'Vector Conversion', link: `${prefix}/development/vector-conversion` }, - { text: 'Variables UI Roadmap', link: `${prefix}/development/variables-ui-roadmap` }, - { text: 'Roadmap', link: `${prefix}/development/roadmap` }, ], }, ] diff --git a/packages/docs/de/development/roadmap.md b/packages/docs/de/development/roadmap.md deleted file mode 100644 index a8f28b1d2..000000000 --- a/packages/docs/de/development/roadmap.md +++ /dev/null @@ -1,69 +0,0 @@ -# Fahrplan - -## Phasen - -### Phase 1: Core-Engine ✅ - -`SceneGraph`, Skia-Rendering, Grundformen, Auswahl, Zoom/Pan, Rückgängig/Wiederherstellen, Fanglinien. - -### Phase 2: Editor-UI + Layout ✅ - -Vue 3 + Reka UI Panels, Eigenschaften, Ebenen, Werkzeugleiste, Yoga Auto-Layout, Inline-Textbearbeitung, Canvas-Lineale. - -### Phase 3: Datei-I/O + Visuelle Features ✅ - -.fig Import/Export, Kiwi-Codec, Zwischenablage, Stiftwerkzeug, Vektornetzwerke, Gruppen, Tauri v2 Desktop, Sektionen, Mehrseiten, Hover-Hervorhebung, Tier-1-Rendering (Verläufe, Bilderfüllungen, Effekte, Kontur-Eigenschaften, Bögen). - -### Phase 4: Komponenten + Variablen ✅ - -Komponenten, Instanzen, Overrides, Komponenten-Sets, Variablen (`COLOR`/FLOAT/STRING/BOOLEAN), Sammlungen, Modi, Bildexport, Kontextmenü, Rich-Text-Formatierung. - -### Phase 5: KI-Integration & Werkzeuge ✅ - -**Geliefert:** -- @open-pencil/core extrahiert in packages/core/ (keine DOM-Abhängigkeiten) -- @open-pencil/cli mit headless .fig-Operationen (info, tree, find, export, analyze, node, pages, variables, eval) -- `eval`-Befehl mit Figma-kompatibler Plugin API für Headless-Skripting -- KI-Chat: OpenRouter-Direktverbindung, 87 Werkzeuge in `packages/core/src/tools/`, Modellauswahl, ⌘J -- 49 zusätzliche KI/MCP-Werkzeuge portiert von figma-use (75 gesamt) -- MCP-Server (@open-pencil/mcp): stdio + HTTP, 87 Core-Tools + 3 Dateiverwaltungs-Tools -- Vereinheitlichte Werkzeugdefinitionen: einmal in `packages/core/src/tools/` definieren, für KI-Chat (valibot), MCP (zod), CLI (eval) adaptieren -- App-Menüleiste für Browser-Modus (Datei, Bearbeiten, Ansicht, Objekt, Text, Anordnen) -- Automatisches Speichern: 3s Debounce nach letzter Szenenänderung -- Multi-Selektion-Eigenschaftspanel mit gemeinsamen/gemischten Werten -- npm-Veröffentlichung mit Provenance für core, cli und mcp - -**Geplant:** -- Attached Mode: WebSocket zum laufenden Editor -- Design-Guidelines-System -- Screenshot-Verification-Loop - -### Phase 6: Kollaboration + Distribution 🟡 - -**Geliefert:** -- P2P-Kollaboration über Trystero (WebRTC) + Yjs CRDT — kein Server-Relay -- Awareness-Protokoll: Live-Cursor, Auswahlen, Präsenz -- Folgemodus: Klick auf Peer-Avatar zum Viewport-Folgen -- Lokale Persistenz über y-indexeddb -- Effekt-Rendering: Schlagschatten, innerer Schatten, Ebenen-/Hintergrund-/Vordergrund-Unschärfe -- Multi-Datei-Tabs: ⌘N/⌘T neuer Tab, ⌘W schließen, ⌘O öffnen -- Apple Code-Signierung und Notarisierung für macOS -- Linux-Builds (x64) in CI hinzugefügt -- VitePress-Dokumentationsseite mit i18n (6 Sprachen) - -**Geplant:** -- Prototyping (Frame-Verbindungen, Übergänge, Animationen) -- Kommentare (Pin, Threads, Auflösen) -- PWA-Unterstützung -- Varianten-Switching, `FLOAT`/STRING/BOOLEAN Variable UI, variablengesteuertes Theming - -## Zeitplan - -| Phase | Geschätzte Dauer | Status | -|-------|-----------------|--------| -| Phase 1: Core-Engine | 3 Monate | ✅ Abgeschlossen | -| Phase 2: Editor-UI + Layout | 3 Monate | ✅ Abgeschlossen | -| Phase 3: Datei-I/O + Visuelle Features | 2 Monate | ✅ Abgeschlossen | -| Phase 4: Komponenten + Variablen | 2 Monate | ✅ Abgeschlossen | -| Phase 5: KI-Integration & Werkzeuge | 2 Monate | ✅ Abgeschlossen | -| Phase 6: Kollaboration + Distribution | 2 Monate | 🟡 In Arbeit | diff --git a/packages/docs/development/figma-compatibility.md b/packages/docs/development/figma-compatibility.md index 28271b840..d8134e2de 100644 --- a/packages/docs/development/figma-compatibility.md +++ b/packages/docs/development/figma-compatibility.md @@ -82,7 +82,7 @@ Figma's design documentation groups features into these areas: | Vertical text alignment | ✅ | ◐ | — | ✅ | ✅ | Modeled; UI/render parity needs more coverage. | | Justified text | ✅ | ◐ | — | ✅ | ✅ | Modeled; UI does not expose it. | | Font variations / OpenType features | ↩ | — | — | ↩ | — | `fontVariations` are preserved only. | -| Variables: collections/modes/aliases | ✅ | ◐ | ◐ | ✅ | ✅ | Color/number/string/boolean model exists; UI remains a roadmap area. | +| Variables: collections/modes/aliases | ✅ | ◐ | ◐ | ✅ | ✅ | Color/number/string/boolean model exists; inspector coverage is still incomplete. | | Variables bound to fills/strokes | ✅ | ✅ | ✅ | ✅ | ✅ | Common color bindings render and edit. | | Variables bound to text/layout/visibility/effects | ◐ | ◐ | ◐ | ◐ | ✅ | Some bindings exist; not full Figma property coverage. | | Variables in prototypes / expressions / conditionals | — | — | — | — | — | Depends on prototype system, which is not implemented. | diff --git a/packages/docs/development/roadmap.md b/packages/docs/development/roadmap.md deleted file mode 100644 index 563e1b63a..000000000 --- a/packages/docs/development/roadmap.md +++ /dev/null @@ -1,161 +0,0 @@ -# Roadmap - -## Phases - -### Phase 1: Core Engine ✅ - -`SceneGraph`, Skia rendering, basic shapes, selection, zoom/pan, undo/redo. - -**Delivered:** -- Scene graph with flat Map storage and parent-child tree -- CanvasKit WASM rendering for all shape types -- Click/shift/marquee selection with resize handles and rotation -- Zoom/pan with keyboard shortcuts and trackpad gestures -- Undo/redo wired into all operations -- Snap guides with edge and center snapping - -### Phase 2: Editor UI + Layout ✅ - -Properties panel, layers panel, toolbar, Yoga layout integration, text editing. - -**Delivered:** -- Vue 3 + Reka UI panels (properties, layers, toolbar) -- Properties panel split into sections (Appearance, Fill, Stroke, Typography, Layout, Position) -- ScrubInput component for all numeric inputs -- Color picker (HSV, hex, opacity) -- Layers panel with tree view, drag reorder, visibility toggle -- Auto-layout with Yoga WASM (direction, gap, padding, justify, align) -- Inline text editing with CanvasKit Paragraph API -- System font loading via Local Font Access API -- Canvas rulers with selection highlight - -### Phase 3: File I/O + Visual Features ✅ - -.fig import/export, Kiwi codec, clipboard, sections, pages, advanced rendering. - -**Delivered:** -- .fig file import via Kiwi binary codec -- .fig file export with Kiwi encoding, Zstd compression, thumbnail generation -- Save (⌘S) and Save As (⇧⌘S) with native OS dialogs -- Zstd compression via Tauri Rust command (deflate fallback in browser) -- Vendored kiwi-schema with ESM + sparse field ID patches -- Figma-compatible clipboard (bidirectional Kiwi binary) -- Pen tool with vector network model -- vectorNetworkBlob binary encode/decode -- Group/ungroup (⌘G/⇧⌘G) -- Tauri v2 desktop app with native menu bar (macOS/Windows/Linux) -- Sections (S key) with title pills, auto-adopt, luminance-adaptive text -- Multi-page documents with pages panel, per-page viewport -- Hover highlight with shape-aware outlines -- Tier 1 rendering: gradients, image fills, effects, strokes (cap/join/dash), arcs -- Fill type picker with solid/gradient/image tabs and gradient stop editing -- Canvas background color per page -- Fig-import unit tests, layout unit tests, layers-panel E2E tests - -### Phase 4: Components + Variables ✅ - -Components, instances, overrides, variables, collections, modes, image export. - -**Delivered:** -- Component creation from frame/group or multi-selection (⌥⌘K) -- Component sets from multiple components (⇧⌘K) with dashed purple border -- Instance creation from components with child cloning and componentId mapping -- Live component-instance sync with override preservation -- Detach instance back to frame (⌥⌘B) -- Go to main component (cross-page navigation) -- Always-visible purple component/instance labels with diamond icon -- Opaque container hit testing (click selects component, double-click enters) -- Right-click context menu with clipboard, z-order, grouping, component, visibility, lock, move-to-page actions -- Z-order manipulation (] bring to front, [ send to back) -- Toggle visibility (⇧⌘H) and lock (⇧⌘L) -- Move nodes between pages via context menu -- Viewport culling, Paint reuse, RAF render coalescing -- Effects panel UI (drop shadow, inner shadow, layer/background/foreground blur) -- Independent corner radius controls (per-corner toggle in Appearance section) -- GitHub Actions CI/CD for Windows (x64, arm64) and macOS (x64, arm64) builds -- Polygon and Star drawing tools with pointCount and starInnerRadius -- Resizable left/right panels via reka-ui Splitter (persistent layout) -- @/ import alias, shared types module (src/types.ts, src/global.d.ts) -- Codebase lint-clean: 0 oxlint warnings, 0 tsgo type errors -- Variables: `COLOR` type with collections, modes, bindings, FillSection variable picker, .fig import -- Variables dialog: TanStack Table with resizable columns, mode columns, collection tabs with rename, search, demo collections (Primitives/Semantic/Spacing), undo/redo for all variable operations -- Image export: PNG/JPG/WEBP with ExportSection (scale, format, live preview), ⇧⌘E shortcut, context menu -- Canvas-native text editing: TextEditor class in core, phantom textarea, cursor/selection/word boundaries on canvas, caret blinking, selection highlights -- System font enumeration via font-kit Rust crate, OnceLock cache, preload on startup -- Font picker: virtual scroll (reka-ui ListboxVirtualizer), search filter, CSS font preview -- ColorInput component extraction, ColorPicker alpha slider checkerboard fix -- App identity: pencil icon, Cargo crate open_pencil, macOS Dock "OpenPencil" -- Splash loader during WASM initialization -- Rich text style runs: per-selection ⌘B/I/U, StyleRun model, ParagraphBuilder pushStyle/pop, .fig roundtrip -- B/I/U/S toggle buttons in TypographySection -- Double-click (word), triple-click (select all) text selection - -**Remaining (deferred to Phase 6):** -- Variant switching -- Variable types: `FLOAT`, `STRING`, `BOOLEAN` editing UI -- Variable-driven theming - -### Phase 5: AI Integration & Tooling ✅ - -Core extraction, CLI, MCP server, AI tools, eval command. - -**Delivered:** -- @open-pencil/core extracted to packages/core/ (zero DOM deps, Bun workspace) -- @open-pencil/cli with headless .fig operations (info, tree, find, export, analyze, node, pages, variables, eval), CanvasKit CPU rasterization, --json output -- `eval` command with Figma-compatible Plugin API for headless scripting -- JSX renderer: TreeNode builders (Frame, Text, Rectangle, etc.), renderTreeNode/renderJsx, Tailwind-like shorthand props, 27 tests -- jscpd copy-paste detection (15.6% → 0.62%), kiwi-serialize.ts consolidation -- .fig roundtrip tests with LFS fixtures (material3.fig 87K nodes, nuxtui.fig 314K nodes) -- .fig import O(n²) → O(n) fix (37s → 535ms on 87K nodes), ByteBuffer optimization -- AI chat: OpenRouter direct (no backend), Stronghold key storage, 87 tools split across domain files in `tools/`, model selector, ⌘J toggle, streaming markdown, Playwright tests with mock transport -- 49 additional AI/MCP tools ported from figma-use (87 total): granular set tools, node operations, variable CRUD, boolean operations, vector path tools, viewport control -- MCP server (@open-pencil/mcp): stdio + HTTP (Hono + Streamable HTTP with sessions), 87 core tools + 3 file management tools (90 total), runs on Bun and Node.js -- Unified tool definitions: define once in `packages/core/src/tools/` (split by domain), adapt for AI chat (valibot), MCP (zod), CLI (eval) -- Code panel: sceneNodeToJsx() export, Prism.js highlighting, line numbers, copy button, 14 tests -- Properties panel restructured: Design | Code | AI tabs -- App menu bar for browser mode (File, Edit, View, Object, Text, Arrange) -- Autosave: debounced 3s write after last scene change -- Multi-selection properties panel with shared/mixed value handling -- npm publishing with provenance for core, cli, and mcp packages - -**Planned:** -- Attached mode: WebSocket to running editor for eval, create, export, screenshot -- Design guidelines system -- Screenshot verification loop - -### Phase 6: Collaboration + Distribution 🟡 - -Real-time collaboration, prototyping, comments, desktop distribution. - -**Delivered:** -- P2P collaboration via Trystero (WebRTC) + Yjs CRDT — no server relay -- Awareness protocol: live cursors, selections, presence with colored cursor arrows -- Follow mode: click peer avatar to follow their viewport -- Local persistence via y-indexeddb -- Share link at `/share/` with secure room IDs -- Effects rendering: drop shadow, inner shadow, shadow spread, layer blur, background blur, foreground blur -- Per-node SkPicture cache for effects (zero re-computation for static effects) -- Multi-file tabs: ⌘N/⌘T new tab, ⌘W close, ⌘O open in new tab -- Apple code signing and notarization for macOS builds -- Linux builds (x64) added to CI -- Git LFS moved to Cloudflare R2 -- VitePress documentation site at openpencil.dev with i18n (6 languages) -- CI/PR templates, CONTRIBUTING.md, SECURITY.md - -**Planned:** -- Prototyping (frame connections, transitions, animations) -- Comments (pin, threads, resolve) -- PWA support -- Variant switching, `FLOAT`/STRING/BOOLEAN variable UI, variable-driven theming -- Full Figma compatibility test suite - -## Timeline - -| Phase | Estimated Duration | Status | -|-------|-------------------|--------| -| Phase 1: Core Engine | 3 months | ✅ Complete | -| Phase 2: Editor UI + Layout | 3 months | ✅ Complete | -| Phase 3: File I/O + Visual Features | 2 months | ✅ Complete | -| Phase 4: Components + Variables | 2 months | ✅ Complete | -| Phase 5: AI Integration & Tooling | 2 months | ✅ Complete | -| Phase 6: Collaboration + Distribution | 2 months | 🟡 In Progress | diff --git a/packages/docs/development/variables-ui-roadmap.md b/packages/docs/development/variables-ui-roadmap.md deleted file mode 100644 index cb9a027a0..000000000 --- a/packages/docs/development/variables-ui-roadmap.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Variables UI Roadmap -description: Current status and planned UI work for OpenPencil design variables, bindings, modes, aliases, and token workflows. ---- - -# Variables UI Roadmap - -OpenPencil already supports local variable collections, modes, aliases, import/export, a variables dialog, color bindings, and several number bindings in the inspector. The remaining work should focus on making variables feel complete in day-to-day editing instead of expanding scope into remote libraries. - -## Current status - -Implemented: - -- Local variable collections and modes. -- Color, number, string, and boolean variable values. -- Alias values and alias resolution. -- Variables dialog with collection tabs, mode columns, type picker, add/rename/delete flows, and mode duplicate/default/delete actions. -- Shared variable picker popover. -- Fill and stroke color bindings using `fills/{index}/color` and `strokes/{index}/color`. -- Number binding primitives via `VariableScrubInput` / `useNumberVariableBinding`. -- Number bindings for opacity, corner radius, independent radii, and size controls. -- .fig/.pen variable import/export paths and token/codegen helpers. - -## Principles - -- Inspector fields should bind variables directly; the variables table alone is not enough. -- Every bindable field should support direct, bound, and mixed states. -- Pickers should be filtered by variable type. -- Bound values should show the variable name plus the resolved preview/value. -- Variable mode behavior should match Figma where practical: the left-most mode is the default mode. - -## Next useful work - -### 1. Finish high-impact number bindings - -Add bindings for remaining common numeric inspector fields: - -- Auto-layout gap. -- Padding values. -- Stroke width. -- Font size. -- Line height. -- Letter spacing. -- Min/max width and height. - -### 2. Improve variable management UI - -The current dialog works, but it still feels like an early table UI. Next improvements: - -- Move collections from top tabs to a left sidebar. -- Render slash-path groups, e.g. `color/text/primary`, as grouped rows. -- Improve type-specific value cells. -- Add clearer empty states for collection, search, and mode columns. -- Add copyable diagnostics for invalid aliases or unresolved bindings. - -### 3. Complete mode operations - -Mode operations exist, but should be made robust and undoable: - -- Add mode reorder. -- Add undo/redo coverage for add, rename, duplicate, default, delete, and reorder. -- Ensure the first mode is always treated as the default mode in import/export and UI. - -### 4. Add mode context - -Allow pages, frames, and selected layers to choose modes per collection. - -Resolution order: - -1. Explicit mode on the node for the collection. -2. Parent-chain explicit mode. -3. Page explicit mode. -4. Collection default mode. - -Inspector UI: - -- Page variables section: collection → selected mode. -- Selected frame/layer Appearance section: collection → Auto/Default/specific mode. - -### 5. Improve aliases and token workflows - -- Add alias editing in value cells. -- Filter alias picker by same variable type. -- Show resolved value previews. -- Prevent alias cycles in editing flows, not only resolution. -- Add DTCG token import/export after local workflows feel solid. - -## Non-goals for this roadmap - -- Remote variable libraries. -- Publishing workflows. -- Team/workspace default modes. -- Prototype variable actions. -- Expressions. diff --git a/packages/docs/es/development/roadmap.md b/packages/docs/es/development/roadmap.md deleted file mode 100644 index ca17a8833..000000000 --- a/packages/docs/es/development/roadmap.md +++ /dev/null @@ -1,67 +0,0 @@ -# Hoja de ruta - -## Fases - -### Fase 1: Motor Core ✅ - -`SceneGraph`, renderizado Skia, formas básicas, selección, zoom/pan, deshacer/rehacer, guías de ajuste. - -### Fase 2: UI del Editor + Layout ✅ - -Vue 3 + Reka UI panels, propiedades, capas, barra de herramientas, Yoga auto-layout, edición de texto inline, reglas del canvas. - -### Fase 3: E/S de Archivos + Funciones Visuales ✅ - -Importación/exportación .fig, codec Kiwi, portapapeles, herramienta de pluma, redes vectoriales, grupos, Tauri v2 desktop, secciones, multi-página, resaltado hover, renderizado Tier 1. - -### Fase 4: Componentes + Variables ✅ - -Componentes, instancias, overrides, conjuntos de componentes, variables (`COLOR`/FLOAT/STRING/BOOLEAN), colecciones, modos, exportación de imágenes, menú contextual, formateo de texto enriquecido. - -### Fase 5: Integración IA & Herramientas ✅ - -**Entregado:** -- @open-pencil/core extraído a packages/core/ (sin dependencias DOM) -- @open-pencil/cli con operaciones headless .fig (info, tree, find, export, analyze, eval) -- Comando `eval` con API Plugin compatible con Figma -- Chat IA: conexión directa OpenRouter, 87 herramientas en `packages/core/src/tools/`, ⌘J -- 49 herramientas IA/MCP adicionales portadas de figma-use (75 en total) -- Servidor MCP (@open-pencil/mcp): stdio + HTTP, 87 herramientas core + 3 de gestión de archivos -- Definiciones de herramientas unificadas: definir una vez en `packages/core/src/tools/` (por dominio), adaptar para chat IA (valibot), MCP (zod), CLI (eval) -- Menú de aplicación para modo navegador -- Autoguardado: escritura con debounce de 3s -- Panel de propiedades multi-selección con valores compartidos/mixtos - -**Planificado:** -- Modo adjunto: WebSocket al editor en ejecución -- Sistema de pautas de diseño - -### Fase 6: Colaboración + Distribución 🟡 - -**Entregado:** -- Colaboración P2P vía Trystero (WebRTC) + Yjs CRDT — sin servidor relay -- Protocolo de awareness: cursores en vivo, selecciones, presencia -- Modo seguimiento: clic en avatar del par para seguir su viewport -- Persistencia local vía y-indexeddb -- Renderizado de efectos: sombra paralela, sombra interior, desenfoque de capa/fondo/primer plano -- Pestañas multi-archivo: ⌘N/⌘T nueva pestaña, ⌘W cerrar, ⌘O abrir -- Firma de código Apple y notarización para macOS -- Builds Linux (x64) añadidos al CI -- Sitio de documentación VitePress con i18n (6 idiomas) - -**Planificado:** -- Prototipado (conexiones de frames, transiciones, animaciones) -- Comentarios (pin, hilos, resolver) -- Soporte PWA -- Cambio de variantes, UI de variables `FLOAT`/STRING/BOOLEAN, theming por variables - -## Cronograma - -| Fase | Duración estimada | Estado | -|------|------------------|--------| -| Fase 1: Motor Core | 3 meses | ✅ Completada | -| Fase 2: UI del Editor + Layout | 3 meses | ✅ Completada | -| Fase 3: E/S de Archivos + Funciones Visuales | 2 meses | ✅ Completada | -| Fase 4: Componentes + Variables | 2 meses | ✅ Completada | -| Fase 5: Integración IA & Herramientas | 2 meses | ✅ Completada | -| Fase 6: Colaboración + Distribución | 2 meses | 🟡 En progreso | diff --git a/packages/docs/fr/development/roadmap.md b/packages/docs/fr/development/roadmap.md deleted file mode 100644 index bd291099d..000000000 --- a/packages/docs/fr/development/roadmap.md +++ /dev/null @@ -1,67 +0,0 @@ -# Feuille de route - -## Phases - -### Phase 1 : Moteur Core ✅ - -`SceneGraph`, rendu Skia, formes de base, sélection, zoom/pan, annuler/rétablir, guides d'alignement. - -### Phase 2 : UI Éditeur + Layout ✅ - -Vue 3 + Reka UI panels, propriétés, calques, barre d'outils, Yoga auto-layout, édition de texte en ligne, règles du canevas. - -### Phase 3 : E/S Fichiers + Fonctionnalités Visuelles ✅ - -Import/export .fig, codec Kiwi, presse-papiers, outil plume, réseaux vectoriels, groupes, Tauri v2 bureau, sections, multi-pages, surbrillance au survol, rendu Tier 1. - -### Phase 4 : Composants + Variables ✅ - -Composants, instances, surcharges, jeux de composants, variables (`COLOR`/FLOAT/STRING/BOOLEAN), collections, modes, export d'images, menu contextuel, formatage de texte riche. - -### Phase 5 : Intégration IA & Outils ✅ - -**Livré :** -- @open-pencil/core extrait dans packages/core/ (aucune dépendance DOM) -- @open-pencil/cli avec opérations headless .fig (info, tree, find, export, analyze, eval) -- Commande `eval` avec API Plugin compatible Figma -- Chat IA : connexion directe OpenRouter, 87 outils dans `packages/core/src/tools/`, ⌘J -- 49 outils IA/MCP additionnels portés depuis figma-use (75 au total) -- Serveur MCP (@open-pencil/mcp) : stdio + HTTP, 87 outils core + 3 gestion de fichiers -- Définitions d'outils unifiées : définir une fois dans `packages/core/src/tools/`, adapter pour chat IA (valibot), MCP (zod), CLI (eval) -- Barre de menus pour le mode navigateur -- Sauvegarde automatique : écriture avec debounce de 3s -- Panneau de propriétés multi-sélection avec valeurs partagées/mixtes - -**Planifié :** -- Mode attaché : WebSocket vers l'éditeur en cours d'exécution -- Système de directives de conception - -### Phase 6 : Collaboration + Distribution 🟡 - -**Livré :** -- Collaboration P2P via Trystero (WebRTC) + Yjs CRDT — sans serveur relais -- Protocole d'awareness : curseurs en direct, sélections, présence -- Mode suivi : clic sur l'avatar d'un pair pour suivre son viewport -- Persistance locale via y-indexeddb -- Rendu des effets : ombre portée, ombre intérieure, flou de calque/arrière-plan/premier plan -- Onglets multi-fichiers : ⌘N/⌘T nouvel onglet, ⌘W fermer, ⌘O ouvrir -- Signature de code Apple et notarisation pour macOS -- Builds Linux (x64) ajoutés au CI -- Site de documentation VitePress avec i18n (6 langues) - -**Planifié :** -- Prototypage (connexions de frames, transitions, animations) -- Commentaires (pin, fils, résoudre) -- Support PWA -- Changement de variantes, UI variables `FLOAT`/STRING/BOOLEAN, theming par variables - -## Calendrier - -| Phase | Durée estimée | Statut | -|-------|--------------|--------| -| Phase 1 : Moteur Core | 3 mois | ✅ Terminée | -| Phase 2 : UI Éditeur + Layout | 3 mois | ✅ Terminée | -| Phase 3 : E/S Fichiers + Fonctionnalités Visuelles | 2 mois | ✅ Terminée | -| Phase 4 : Composants + Variables | 2 mois | ✅ Terminée | -| Phase 5 : Intégration IA & Outils | 2 mois | ✅ Terminée | -| Phase 6 : Collaboration + Distribution | 2 mois | 🟡 En cours | diff --git a/packages/docs/it/development/roadmap.md b/packages/docs/it/development/roadmap.md deleted file mode 100644 index 4d130b0b6..000000000 --- a/packages/docs/it/development/roadmap.md +++ /dev/null @@ -1,67 +0,0 @@ -# Roadmap - -## Fasi - -### Fase 1: Motore Core ✅ - -`SceneGraph`, rendering Skia, forme base, selezione, zoom/pan, annulla/ripristina, guide di snap. - -### Fase 2: UI Editor + Layout ✅ - -Vue 3 + Reka UI panels, proprietà, livelli, barra strumenti, Yoga auto-layout, editing testo inline, righelli canvas. - -### Fase 3: File I/O + Feature Visive ✅ - -Import/export .fig, codec Kiwi, appunti, strumento penna, reti vettoriali, gruppi, Tauri v2 desktop, sezioni, multi-pagina, evidenziazione hover, rendering Tier 1. - -### Fase 4: Componenti + Variabili ✅ - -Componenti, istanze, override, set di componenti, variabili (`COLOR`/FLOAT/STRING/BOOLEAN), collezioni, modalità, export immagini, menu contestuale, formattazione testo ricco. - -### Fase 5: Integrazione IA & Strumenti ✅ - -**Consegnato:** -- @open-pencil/core estratto in packages/core/ (nessuna dipendenza DOM) -- @open-pencil/cli con operazioni headless .fig (info, tree, find, export, analyze, eval) -- Comando `eval` con API Plugin compatibile Figma -- Chat IA: connessione diretta OpenRouter, 87 strumenti in `packages/core/src/tools/`, ⌘J -- 49 strumenti IA/MCP aggiuntivi portati da figma-use (75 in totale) -- Server MCP (@open-pencil/mcp): stdio + HTTP, 87 strumenti core + 3 gestione file -- Definizioni strumenti unificate: definire una volta in `packages/core/src/tools/`, adattare per chat IA (valibot), MCP (zod), CLI (eval) -- Barra dei menu per modalità browser -- Salvataggio automatico: scrittura con debounce di 3s -- Pannello proprietà multi-selezione con valori condivisi/misti - -**Pianificato:** -- Modalità attached: WebSocket verso l'editor in esecuzione -- Sistema di linee guida di design - -### Fase 6: Collaborazione + Distribuzione 🟡 - -**Consegnato:** -- Collaborazione P2P via Trystero (WebRTC) + Yjs CRDT — senza server relay -- Protocollo awareness: cursori in tempo reale, selezioni, presenza -- Modalità segui: clic sull'avatar di un peer per seguire il suo viewport -- Persistenza locale via y-indexeddb -- Rendering effetti: ombra portata, ombra interna, sfocatura livello/sfondo/primo piano -- Schede multi-file: ⌘N/⌘T nuova scheda, ⌘W chiudi, ⌘O apri -- Firma codice Apple e notarizzazione per macOS -- Build Linux (x64) aggiunti al CI -- Sito documentazione VitePress con i18n (6 lingue) - -**Pianificato:** -- Prototipazione (connessioni frame, transizioni, animazioni) -- Commenti (pin, thread, risolvere) -- Supporto PWA -- Cambio varianti, UI variabili `FLOAT`/STRING/BOOLEAN, theming tramite variabili - -## Tempistica - -| Fase | Durata stimata | Stato | -|------|---------------|--------| -| Fase 1: Motore Core | 3 mesi | ✅ Completata | -| Fase 2: UI Editor + Layout | 3 mesi | ✅ Completata | -| Fase 3: File I/O + Feature Visive | 2 mesi | ✅ Completata | -| Fase 4: Componenti + Variabili | 2 mesi | ✅ Completata | -| Fase 5: Integrazione IA & Strumenti | 2 mesi | ✅ Completata | -| Fase 6: Collaborazione + Distribuzione | 2 mesi | 🟡 In corso | diff --git a/packages/docs/pl/development/roadmap.md b/packages/docs/pl/development/roadmap.md deleted file mode 100644 index ccced2262..000000000 --- a/packages/docs/pl/development/roadmap.md +++ /dev/null @@ -1,67 +0,0 @@ -# Plan rozwoju - -## Fazy - -### Faza 1: Silnik Core ✅ - -`SceneGraph`, renderowanie Skia, podstawowe kształty, selekcja, zoom/pan, cofnij/ponów, linie wyrównania. - -### Faza 2: UI Edytora + Layout ✅ - -Vue 3 + Reka UI panele, właściwości, warstwy, pasek narzędzi, Yoga auto-layout, edycja tekstu inline, linijki canvas. - -### Faza 3: I/O Plików + Funkcje Wizualne ✅ - -Import/eksport .fig, kodek Kiwi, schowek, narzędzie pióra, sieci wektorowe, grupy, Tauri v2 desktop, sekcje, wiele stron, podświetlenie hover, renderowanie Tier 1. - -### Faza 4: Komponenty + Zmienne ✅ - -Komponenty, instancje, nadpisania, zestawy komponentów, zmienne (`COLOR`/FLOAT/STRING/BOOLEAN), kolekcje, tryby, eksport obrazów, menu kontekstowe, formatowanie tekstu bogatego. - -### Faza 5: Integracja AI i Narzędzia ✅ - -**Dostarczone:** -- @open-pencil/core wyodrębniony do packages/core/ (zero zależności DOM) -- @open-pencil/cli z headless operacjami .fig (info, tree, find, export, analyze, eval) -- Polecenie `eval` z API Plugin kompatybilnym z Figmą -- Chat AI: bezpośrednie połączenie OpenRouter, 87 narzędzi w `packages/core/src/tools/`, ⌘J -- 49 dodatkowych narzędzi AI/MCP przeniesionych z figma-use (75 łącznie) -- Serwer MCP (@open-pencil/mcp): stdio + HTTP, 87 narzędzi core + 3 zarządzanie plikami -- Ujednolicone definicje narzędzi: zdefiniuj raz w `packages/core/src/tools/`, adaptuj dla chatu AI (valibot), MCP (zod), CLI (eval) -- Pasek menu dla trybu przeglądarki -- Autozapis: zapis z debounce 3s -- Panel właściwości multi-selekcji z wartościami wspólnymi/mieszanymi - -**Planowane:** -- Tryb attached: WebSocket do działającego edytora -- System wytycznych projektowych - -### Faza 6: Współpraca + Dystrybucja 🟡 - -**Dostarczone:** -- Współpraca P2P przez Trystero (WebRTC) + Yjs CRDT — bez serwera relay -- Protokół awareness: kursory na żywo, selekcje, obecność -- Tryb śledzenia: klik na avatar peera aby śledzić viewport -- Lokalna persystencja przez y-indexeddb -- Renderowanie efektów: cień rzucany, cień wewnętrzny, rozmycie warstwy/tła/pierwszego planu -- Karty multi-plikowe: ⌘N/⌘T nowa karta, ⌘W zamknij, ⌘O otwórz -- Podpisywanie kodu Apple i notaryzacja dla macOS -- Buildy Linux (x64) dodane do CI -- Strona dokumentacji VitePress z i18n (6 języków) - -**Planowane:** -- Prototypowanie (połączenia ramek, przejścia, animacje) -- Komentarze (pin, wątki, rozwiązywanie) -- Wsparcie PWA -- Przełączanie wariantów, UI zmiennych `FLOAT`/STRING/BOOLEAN, theming przez zmienne - -## Harmonogram - -| Faza | Szacowany czas | Status | -|------|---------------|--------| -| Faza 1: Silnik Core | 3 miesiące | ✅ Ukończona | -| Faza 2: UI Edytora + Layout | 3 miesiące | ✅ Ukończona | -| Faza 3: I/O Plików + Funkcje Wizualne | 2 miesiące | ✅ Ukończona | -| Faza 4: Komponenty + Zmienne | 2 miesiące | ✅ Ukończona | -| Faza 5: Integracja AI i Narzędzia | 2 miesiące | ✅ Ukończona | -| Faza 6: Współpraca + Dystrybucja | 2 miesiące | 🟡 W toku | diff --git a/packages/docs/ru/development/roadmap.md b/packages/docs/ru/development/roadmap.md deleted file mode 100644 index 122fa1c3e..000000000 --- a/packages/docs/ru/development/roadmap.md +++ /dev/null @@ -1,161 +0,0 @@ -# Дорожная карта - -## Фазы - -### Фаза 1: Ядро движка ✅ - -`SceneGraph`, отрисовка Skia, базовые фигуры, выделение, масштабирование/панорамирование, отмена/повтор. - -**Реализовано:** -- Граф сцены с хранением в плоском Map и древовидной структурой родитель-потомок -- Отрисовка CanvasKit WASM для всех типов фигур -- Выделение кликом/shift/рамкой с ручками масштабирования и вращением -- Масштабирование/панорамирование с сочетаниями клавиш и жестами трекпада -- Отмена/повтор для всех операций -- Направляющие привязки к краям и центрам - -### Фаза 2: Интерфейс редактора + компоновка ✅ - -Панель свойств, панель слоёв, панель инструментов, интеграция Yoga для компоновки, редактирование текста. - -**Реализовано:** -- Панели Vue 3 + Reka UI (свойства, слои, панель инструментов) -- Панель свойств, разделённая на секции (Внешний вид, Заливка, Обводка, Типографика, Компоновка, Позиция) -- Компонент ScrubInput для всех числовых полей ввода -- Палитра цветов (HSV, hex, непрозрачность) -- Панель слоёв с древовидным видом, перетаскиванием для изменения порядка, переключателем видимости -- Auto-layout с Yoga WASM (направление, gap, padding, justify, align) -- Встроенное редактирование текста через CanvasKit Paragraph API -- Загрузка системных шрифтов через Local Font Access API -- Линейки на холсте с подсветкой выделения - -### Фаза 3: Файловый ввод/вывод + визуальные возможности ✅ - -Импорт/экспорт .fig, кодек Kiwi, буфер обмена, секции, страницы, продвинутая отрисовка. - -**Реализовано:** -- Импорт .fig файлов через бинарный кодек Kiwi -- Экспорт .fig файлов с Kiwi-кодированием, Zstd-сжатием, генерацией миниатюры -- Сохранение (⌘S) и Сохранить как (⇧⌘S) с нативными диалогами ОС -- Zstd-сжатие через Tauri Rust-команду (fallback на deflate в браузере) -- Вендорённый kiwi-schema с патчами для ESM + разреженных ID полей -- Figma-совместимый буфер обмена (двусторонний бинарный Kiwi) -- Инструмент «Перо» с моделью векторных сетей -- Бинарное кодирование/декодирование vectorNetworkBlob -- Группировка/разгруппировка (⌘G/⇧⌘G) -- Десктопное приложение Tauri v2 с нативной строкой меню (macOS/Windows/Linux) -- Секции (клавиша S) с плашками заголовков, авто-захватом, адаптивным цветом текста -- Многостраничные документы с панелью страниц, отдельной областью просмотра для каждой страницы -- Подсветка при наведении с контурами, повторяющими форму объекта -- Отрисовка 1-го уровня: градиенты, заливки изображениями, эффекты, обводки (cap/join/dash), дуги -- Выбор типа заливки с вкладками solid/gradient/image и редактированием точек градиента -- Цвет фона холста для каждой страницы -- Юнит-тесты fig-import, юнит-тесты компоновки, E2E-тесты панели слоёв - -### Фаза 4: Компоненты + переменные ✅ - -Компоненты, экземпляры, переопределения, переменные, коллекции, режимы, экспорт изображений. - -**Реализовано:** -- Создание компонентов из фрейма/группы или мульти-выделения (⌥⌘K) -- Наборы компонентов из нескольких компонентов (⇧⌘K) с пунктирной фиолетовой рамкой -- Создание экземпляров из компонентов с клонированием потомков и маппингом componentId -- Синхронизация компонент-экземпляр в реальном времени с сохранением переопределений -- Открепление экземпляра обратно во фрейм (⌥⌘B) -- Переход к основному компоненту (навигация между страницами) -- Постоянно видимые фиолетовые метки компонентов/экземпляров с иконкой ромба -- Проверка попадания в непрозрачный контейнер (клик выделяет компонент, двойной клик — входит внутрь) -- Контекстное меню по правому клику с действиями: буфер обмена, z-порядок, группировка, компонент, видимость, блокировка, перемещение на другую страницу -- Управление z-порядком (] на передний план, [ на задний план) -- Переключение видимости (⇧⌘H) и блокировки (⇧⌘L) -- Перемещение узлов между страницами через контекстное меню -- Culling области просмотра, повторное использование Paint, объединение RAF-отрисовок -- UI панели эффектов (тень, внутренняя тень, размытие слоя/фона/переднего плана) -- Независимые радиусы углов (переключатель для каждого угла в секции «Внешний вид») -- CI/CD через GitHub Actions для сборок Windows (x64, arm64) и macOS (x64, arm64) -- Инструменты рисования многоугольников и звёзд с pointCount и starInnerRadius -- Изменяемые размеры левой/правой панелей через reka-ui Splitter (сохраняемый макет) -- Алиас импорта @/, модуль общих типов (src/types.ts, src/global.d.ts) -- Чистый код: 0 предупреждений oxlint, 0 ошибок типов tsgo -- Переменные: тип `COLOR` с коллекциями, режимами, привязками, выбор переменных в FillSection, импорт из .fig -- Диалог переменных: TanStack Table с изменяемой шириной столбцов, столбцы режимов, вкладки коллекций с переименованием, поиск, демо-коллекции (Primitives/Semantic/Spacing), отмена/повтор для всех операций с переменными -- Экспорт изображений: PNG/JPG/WEBP с ExportSection (масштаб, формат, предпросмотр), сочетание ⇧⌘E, контекстное меню -- Нативное редактирование текста на холсте: класс TextEditor в core, phantom textarea, курсор/выделение/границы слов на холсте, мерцание каретки, подсветка выделения -- Перечисление системных шрифтов через Rust-крейт font-kit, кеш OnceLock, предзагрузка при старте -- Выбор шрифтов: виртуальный скролл (reka-ui ListboxVirtualizer), поисковый фильтр, CSS-предпросмотр шрифта -- Извлечение компонента ColorInput, исправление шахматного фона ползунка прозрачности ColorPicker -- Идентичность приложения: иконка-карандаш, Cargo crate open_pencil, macOS Dock «OpenPencil» -- Заставка во время инициализации WASM -- Стилевые серии в тексте: ⌘B/I/U для выделения, модель StyleRun, ParagraphBuilder pushStyle/pop, roundtrip .fig -- Кнопки B/I/U/S в секции типографики -- Выделение текста двойным кликом (слово), тройным кликом (всё) - -**Оставшееся (перенесено в Фазу 6):** -- Переключение вариантов -- UI для типов переменных: `FLOAT`, `STRING`, `BOOLEAN` -- Тематизация на основе переменных - -### Фаза 5: AI-интеграция и инструментарий ✅ - -Извлечение core, CLI, MCP-сервер, AI-инструменты, команда eval. - -**Реализовано:** -- @open-pencil/core извлечён в packages/core/ (без DOM-зависимостей, Bun workspace) -- @open-pencil/cli с headless-операциями над .fig (info, tree, find, export, analyze, node, pages, variables, eval), CPU-растеризация CanvasKit, вывод --json -- Команда `eval` с Figma-совместимым Plugin API для headless-скриптинга -- JSX-рендерер: билдеры TreeNode (Frame, Text, Rectangle и др.), renderTreeNode/renderJsx, Tailwind-подобные shorthand-пропсы, 27 тестов -- Обнаружение копипасты jscpd (15.6% → 0.62%), консолидация kiwi-serialize.ts -- Тесты roundtrip .fig с LFS-фикстурами (material3.fig 87K узлов, nuxtui.fig 314K узлов) -- Исправление O(n²) → O(n) в импорте .fig (37с → 535мс на 87K узлов), оптимизация ByteBuffer -- AI-чат: OpenRouter напрямую (без бэкенда), хранение ключей в Stronghold, 87 инструментов, разделённых по доменным файлам в `tools/`, селектор моделей, ⌘J, потоковый markdown, тесты Playwright с mock-транспортом -- 49 дополнительных AI/MCP инструментов, портированных из figma-use (87 всего): гранулярные set-инструменты, операции с узлами, CRUD переменных, булевы операции, инструменты векторных путей, управление областью просмотра -- MCP-сервер (@open-pencil/mcp): stdio + HTTP (Hono + Streamable HTTP с сессиями), 87 core-инструментов + 3 инструмента управления файлами (90 всего), работает на Bun и Node.js -- Унифицированные определения инструментов: определяются один раз в `packages/core/src/tools/` (по доменам), адаптируются для AI-чата (valibot), MCP (zod), CLI (eval) -- Панель кода: экспорт sceneNodeToJsx(), подсветка Prism.js, нумерация строк, кнопка копирования, 14 тестов -- Панель свойств реструктурирована: вкладки Design | Code | AI -- Строка меню приложения для браузерного режима (File, Edit, View, Object, Text, Arrange) -- Автосохранение: дебаунс 3с записи после последнего изменения сцены -- Панель свойств мульти-выделения с обработкой общих/смешанных значений -- Публикация в npm с provenance для core, cli и mcp - -**Планируется:** -- Attached-режим: WebSocket к запущенному редактору для eval, create, export, screenshot -- Система дизайн-гайдлайнов -- Цикл верификации скриншотов - -### Фаза 6: Коллаборация + распространение 🟡 - -Совместная работа в реальном времени, прототипирование, комментарии, распространение десктопного приложения. - -**Реализовано:** -- P2P-коллаборация через Trystero (WebRTC) + Yjs CRDT — без серверного реле -- Протокол Awareness: живые курсоры, выделения, присутствие с цветными стрелками курсоров -- Режим следования: клик по аватару участника для отслеживания его области просмотра -- Локальное хранение через y-indexeddb -- Ссылка для совместного доступа по адресу `/share/` с безопасными ID комнат -- Отрисовка эффектов: тень, внутренняя тень, разброс тени, размытие слоя, размытие фона, размытие переднего плана -- Кеш SkPicture для каждого узла для эффектов (нулевой пересчёт для статических эффектов) -- Мульти-файловые вкладки: ⌘N/⌘T новая вкладка, ⌘W закрыть, ⌘O открыть в новой вкладке -- Подписание кода Apple и нотаризация для сборок macOS -- Сборки Linux (x64) добавлены в CI -- Git LFS перемещён на Cloudflare R2 -- Сайт документации VitePress на openpencil.dev с i18n (6 языков) -- CI/PR-шаблоны, CONTRIBUTING.md, SECURITY.md - -**Планируется:** -- Прототипирование (связи фреймов, переходы, анимации) -- Комментарии (закрепление, треды, разрешение) -- Поддержка PWA -- Переключение вариантов, UI для `FLOAT`/STRING/BOOLEAN переменных, тематизация на основе переменных -- Полный набор тестов совместимости с Figma - -## Сроки - -| Фаза | Оценочная длительность | Статус | -|------|------------------------|--------| -| Фаза 1: Ядро движка | 3 месяца | ✅ Завершена | -| Фаза 2: Интерфейс редактора + компоновка | 3 месяца | ✅ Завершена | -| Фаза 3: Файловый ввод/вывод + визуальные возможности | 2 месяца | ✅ Завершена | -| Фаза 4: Компоненты + переменные | 2 месяца | ✅ Завершена | -| Фаза 5: AI-интеграция и инструментарий | 2 месяца | ✅ Завершена | -| Фаза 6: Коллаборация + распространение | 2 месяца | 🟡 В процессе |