Współtworzenie

Struktura projektu

packages/
  core/              @open-pencil/core — silnik (zero zależności DOM)
    src/             Graf sceny, renderer, layout, kodek, kiwi, typy
  cli/               @open-pencil/cli — headless CLI do operacji .fig
    src/commands/    info, tree, find, export, eval, analyze
  mcp/               @open-pencil/mcp — serwer MCP dla narzędzi AI
    src/             Transporty stdio + HTTP (Hono), 87 narzędzi
src/
  components/        Vue SFCs (canvas, panele, pasek narzędzi, wybieracz kolorów)
    properties/      Sekcje panelu właściwości (Wygląd, Wypełnienie, Obrys, itp.)
  composables/       Wejście canvasu, skróty klawiszowe, hooki renderowania
  stores/            Stan edytora (reaktywność Vue)
  engine/            Shimy re-eksportu z @open-pencil/core
  kiwi/              Shimy re-eksportu z @open-pencil/core
  types.ts           Współdzielone typy (re-eksportowane z core)
  constants.ts       Kolory UI, wartości domyślne, progi
desktop/             Tauri v2 (Rust + config)
tests/
  e2e/               Regresja wizualna Playwright
  engine/            Testy jednostkowe (bun:test)
docs/                Strona dokumentacji VitePress
  specs/             Specyfikacje możliwości (źródło prawdy)
  changes/           Aktywne i zarchiwizowane zmiany

Konfiguracja deweloperska

bun install
bun run dev          # Edytor na localhost:1420
bun run docs:dev     # Dokumentacja na localhost:5173

Styl kodu

Narzędzia

Narzędzie	Polecenie	Cel
oxlint	bun run lint	Linting (oparty na Rust, szybki)
oxfmt	bun run format	Formatowanie kodu
tsgo	bun run typecheck	Sprawdzanie typów (checker TypeScript oparty na Go)

Uruchom wszystkie sprawdzenia:

bun run check

Konwencje

• Nazwy plików — kebab-case (scene-graph.ts, use-canvas-input.ts)
• Komponenty — PascalCase Vue SFCs (EditorCanvas.vue, ScrubInput.vue)
• Stałe — SCREAMING_SNAKE_CASE
• Funkcje/zmienne — camelCase
• Typy/interfejsy — PascalCase

Konwencje dla agentów AI

Deweloperzy i agenci AI powinni przeczytać AGENTS.md w katalogu głównym repo (zobacz na GitHub). Obejmuje renderowanie, graf sceny, komponenty i instancje, layout, UI, format pliku, konwencje Tauri i znane problemy.

Wprowadzanie zmian

3. Zaimplementować zmianę
4. Uruchomić bun run check i bun run test
5. Wysłać pull request

Kluczowe pliki

Kod źródłowy silnika core znajduje się w packages/core/src/. Kod aplikacyjny edytora, dokumentów, AI, współpracy, shella, demo i automatyzacji znajduje się w src/app/*; SDK Vue zawiera wielokrotnego użytku kod canvasu i composable w packages/vue/src/.

Plik	Cel
packages/core/src/scene-graph/	Graf sceny: węzły, zmienne, instancje, hit testing
packages/core/src/canvas/renderer.ts	Pipeline renderowania CanvasKit
packages/core/src/layout.ts	Adapter layoutu Yoga
packages/core/src/scene-graph/undo.ts	Menedżer cofnij/ponów
packages/core/src/clipboard.ts	Schowek kompatybilny z Figmą
packages/core/src/vector/	Model sieci wektorowej
packages/core/src/io/formats/raster/render.ts	Eksport obrazu offscreen (PNG/JPG/WEBP)
packages/core/src/kiwi/binary/codec.ts	Koder/dekoder binarny Kiwi
packages/core/src/kiwi/fig-import.ts	Logika importu plików .fig
packages/cli/src/index.ts	Punkt wejścia CLI
packages/core/src/tools/	Ujednolicone definicje narzędzi (AI, MCP, CLI)
packages/core/src/figma-api/	Implementacja Figma Plugin API
packages/mcp/src/server.ts	Fabryka serwera MCP
packages/cli/src/commands/	Polecenia CLI (info, tree, find, export, eval, analyze)
src/app/editor/session/create.ts	Editor session assembly
packages/vue/src/canvas/CanvasRoot.vue	Composable renderowania canvasu
packages/vue/src/canvas/useCanvasInput.ts	Obsługa wejścia mysz/dotyk
src/app/shell/keyboard/use.ts	Obsługa skrótów klawiszowych