docs: remove stale roadmap pages
This commit is contained in:
Danila Poyarkov
parent
540b706349
commit
9431c1935e
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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` },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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, <kbd>⌘</kbd><kbd>J</kbd>
|
||||
- 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: <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> neuer Tab, <kbd>⌘</kbd><kbd>W</kbd> schließen, <kbd>⌘</kbd><kbd>O</kbd> ö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 |
|
||||
|
|
@ -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. |
|
||||
|
|
|
|||
|
|
@ -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 (<kbd>⌘</kbd><kbd>S</kbd>) and Save As (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd>) 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 (<kbd>⌘</kbd><kbd>G</kbd>/<kbd>⇧</kbd><kbd>⌘</kbd><kbd>G</kbd>)
|
||||
- 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 (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd>)
|
||||
- Component sets from multiple components (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd>) 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 (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd>)
|
||||
- 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 (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>H</kbd>) and lock (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>L</kbd>)
|
||||
- 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), <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd> 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 <kbd>⌘</kbd><kbd>B</kbd>/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, <kbd>⌘</kbd><kbd>J</kbd> 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/<room-id>` 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: <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> new tab, <kbd>⌘</kbd><kbd>W</kbd> close, <kbd>⌘</kbd><kbd>O</kbd> 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 |
|
||||
|
|
@ -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.
|
||||
|
|
@ -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/`, <kbd>⌘</kbd><kbd>J</kbd>
|
||||
- 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: <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> nueva pestaña, <kbd>⌘</kbd><kbd>W</kbd> cerrar, <kbd>⌘</kbd><kbd>O</kbd> 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 |
|
||||
|
|
@ -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/`, <kbd>⌘</kbd><kbd>J</kbd>
|
||||
- 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 : <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> nouvel onglet, <kbd>⌘</kbd><kbd>W</kbd> fermer, <kbd>⌘</kbd><kbd>O</kbd> 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 |
|
||||
|
|
@ -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/`, <kbd>⌘</kbd><kbd>J</kbd>
|
||||
- 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: <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> nuova scheda, <kbd>⌘</kbd><kbd>W</kbd> chiudi, <kbd>⌘</kbd><kbd>O</kbd> 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 |
|
||||
|
|
@ -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/`, <kbd>⌘</kbd><kbd>J</kbd>
|
||||
- 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: <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> nowa karta, <kbd>⌘</kbd><kbd>W</kbd> zamknij, <kbd>⌘</kbd><kbd>O</kbd> 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 |
|
||||
|
|
@ -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-сжатием, генерацией миниатюры
|
||||
- Сохранение (<kbd>⌘</kbd><kbd>S</kbd>) и Сохранить как (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd>) с нативными диалогами ОС
|
||||
- Zstd-сжатие через Tauri Rust-команду (fallback на deflate в браузере)
|
||||
- Вендорённый kiwi-schema с патчами для ESM + разреженных ID полей
|
||||
- Figma-совместимый буфер обмена (двусторонний бинарный Kiwi)
|
||||
- Инструмент «Перо» с моделью векторных сетей
|
||||
- Бинарное кодирование/декодирование vectorNetworkBlob
|
||||
- Группировка/разгруппировка (<kbd>⌘</kbd><kbd>G</kbd>/<kbd>⇧</kbd><kbd>⌘</kbd><kbd>G</kbd>)
|
||||
- Десктопное приложение Tauri v2 с нативной строкой меню (macOS/Windows/Linux)
|
||||
- Секции (клавиша S) с плашками заголовков, авто-захватом, адаптивным цветом текста
|
||||
- Многостраничные документы с панелью страниц, отдельной областью просмотра для каждой страницы
|
||||
- Подсветка при наведении с контурами, повторяющими форму объекта
|
||||
- Отрисовка 1-го уровня: градиенты, заливки изображениями, эффекты, обводки (cap/join/dash), дуги
|
||||
- Выбор типа заливки с вкладками solid/gradient/image и редактированием точек градиента
|
||||
- Цвет фона холста для каждой страницы
|
||||
- Юнит-тесты fig-import, юнит-тесты компоновки, E2E-тесты панели слоёв
|
||||
|
||||
### Фаза 4: Компоненты + переменные ✅
|
||||
|
||||
Компоненты, экземпляры, переопределения, переменные, коллекции, режимы, экспорт изображений.
|
||||
|
||||
**Реализовано:**
|
||||
- Создание компонентов из фрейма/группы или мульти-выделения (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd>)
|
||||
- Наборы компонентов из нескольких компонентов (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd>) с пунктирной фиолетовой рамкой
|
||||
- Создание экземпляров из компонентов с клонированием потомков и маппингом componentId
|
||||
- Синхронизация компонент-экземпляр в реальном времени с сохранением переопределений
|
||||
- Открепление экземпляра обратно во фрейм (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd>)
|
||||
- Переход к основному компоненту (навигация между страницами)
|
||||
- Постоянно видимые фиолетовые метки компонентов/экземпляров с иконкой ромба
|
||||
- Проверка попадания в непрозрачный контейнер (клик выделяет компонент, двойной клик — входит внутрь)
|
||||
- Контекстное меню по правому клику с действиями: буфер обмена, z-порядок, группировка, компонент, видимость, блокировка, перемещение на другую страницу
|
||||
- Управление z-порядком (] на передний план, [ на задний план)
|
||||
- Переключение видимости (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>H</kbd>) и блокировки (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>L</kbd>)
|
||||
- Перемещение узлов между страницами через контекстное меню
|
||||
- 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 (масштаб, формат, предпросмотр), сочетание <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd>, контекстное меню
|
||||
- Нативное редактирование текста на холсте: класс TextEditor в core, phantom textarea, курсор/выделение/границы слов на холсте, мерцание каретки, подсветка выделения
|
||||
- Перечисление системных шрифтов через Rust-крейт font-kit, кеш OnceLock, предзагрузка при старте
|
||||
- Выбор шрифтов: виртуальный скролл (reka-ui ListboxVirtualizer), поисковый фильтр, CSS-предпросмотр шрифта
|
||||
- Извлечение компонента ColorInput, исправление шахматного фона ползунка прозрачности ColorPicker
|
||||
- Идентичность приложения: иконка-карандаш, Cargo crate open_pencil, macOS Dock «OpenPencil»
|
||||
- Заставка во время инициализации WASM
|
||||
- Стилевые серии в тексте: <kbd>⌘</kbd><kbd>B</kbd>/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/`, селектор моделей, <kbd>⌘</kbd><kbd>J</kbd>, потоковый 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/<room-id>` с безопасными ID комнат
|
||||
- Отрисовка эффектов: тень, внутренняя тень, разброс тени, размытие слоя, размытие фона, размытие переднего плана
|
||||
- Кеш SkPicture для каждого узла для эффектов (нулевой пересчёт для статических эффектов)
|
||||
- Мульти-файловые вкладки: <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> новая вкладка, <kbd>⌘</kbd><kbd>W</kbd> закрыть, <kbd>⌘</kbd><kbd>O</kbd> открыть в новой вкладке
|
||||
- Подписание кода 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 месяца | 🟡 В процессе |
|
||||
Loading…
Reference in a new issue