From fe755fbb8544cc9f5ddea0ddb1592cd9092b98b1 Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Mon, 9 Mar 2026 17:43:11 +0300 Subject: [PATCH] Release v0.9.0 --- CHANGELOG.md | 9 ++- PLAN.md | 19 +++--- README.md | 15 ++--- desktop/tauri.conf.json | 2 +- package.json | 2 +- packages/cli/package.json | 2 +- packages/core/package.json | 2 +- packages/docs/de/guide/architecture.md | 12 ++-- packages/docs/de/guide/features.md | 8 ++- packages/docs/de/guide/figma-comparison.md | 2 +- packages/docs/de/guide/tech-stack.md | 10 ++- packages/docs/de/programmable/ai-chat.md | 59 ++++++++++------- .../docs/de/reference/keyboard-shortcuts.md | 6 +- packages/docs/de/user-guide/auto-layout.md | 33 +++++++++- packages/docs/es/guide/architecture.md | 12 ++-- packages/docs/es/guide/features.md | 8 ++- packages/docs/es/guide/figma-comparison.md | 4 +- packages/docs/es/guide/tech-stack.md | 12 +++- packages/docs/es/programmable/ai-chat.md | 57 +++++++++++------ .../docs/es/reference/keyboard-shortcuts.md | 6 +- packages/docs/es/user-guide/auto-layout.md | 32 +++++++++- packages/docs/fr/guide/architecture.md | 12 ++-- packages/docs/fr/guide/features.md | 8 ++- packages/docs/fr/guide/figma-comparison.md | 4 +- packages/docs/fr/guide/tech-stack.md | 12 +++- packages/docs/fr/programmable/ai-chat.md | 39 ++++++++---- .../docs/fr/reference/keyboard-shortcuts.md | 6 +- packages/docs/fr/user-guide/auto-layout.md | 32 +++++++++- packages/docs/guide/architecture.md | 12 ++-- packages/docs/guide/features.md | 8 ++- packages/docs/guide/figma-comparison.md | 2 +- packages/docs/guide/tech-stack.md | 10 ++- packages/docs/it/guide/architecture.md | 12 ++-- packages/docs/it/guide/features.md | 8 ++- packages/docs/it/guide/figma-comparison.md | 4 +- packages/docs/it/guide/tech-stack.md | 12 +++- packages/docs/it/programmable/ai-chat.md | 59 ++++++++++------- .../docs/it/reference/keyboard-shortcuts.md | 6 +- packages/docs/it/user-guide/auto-layout.md | 32 +++++++++- packages/docs/pl/guide/architecture.md | 12 ++-- packages/docs/pl/guide/features.md | 8 ++- packages/docs/pl/guide/figma-comparison.md | 4 +- packages/docs/pl/guide/tech-stack.md | 14 ++++- packages/docs/pl/programmable/ai-chat.md | 61 +++++++++++------- .../docs/pl/reference/keyboard-shortcuts.md | 6 +- packages/docs/pl/user-guide/auto-layout.md | 32 +++++++++- packages/docs/programmable/ai-chat.md | 37 ++++++++--- packages/docs/reference/keyboard-shortcuts.md | 6 +- packages/docs/ru/guide/architecture.md | 12 ++-- packages/docs/ru/guide/features.md | 8 ++- packages/docs/ru/guide/figma-comparison.md | 2 +- packages/docs/ru/guide/tech-stack.md | 12 +++- packages/docs/ru/programmable/ai-chat.md | 63 ++++++++++++------- .../docs/ru/reference/keyboard-shortcuts.md | 6 +- packages/docs/ru/user-guide/auto-layout.md | 33 +++++++++- packages/docs/user-guide/auto-layout.md | 35 ++++++++++- 56 files changed, 664 insertions(+), 277 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b851e471..01660f8fd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## Unreleased +## 0.9.0 — 2026-03-09 ### Features @@ -12,6 +12,8 @@ - New AI tools: `get_jsx` (JSX roundtrip view), `diff_jsx` (structural diff), `describe` (semantic role, visual style, layout, design issues) - AI visual verification — `export_image` returns image content to the model for vision-based review - API type toggle (Completions/Responses) for OpenAI-compatible providers +- Figma zoom shortcuts — ⌘0 (100%), ⌘1 (zoom to fit), ⌘2 (zoom to selection), ⇧1/⇧2 alternatives +- XPath query tool — `query_nodes` for AI/MCP with attribute selectors, tree traversal, and type filtering ### Fixes @@ -30,6 +32,9 @@ - Undo support for auto-layout reorder, layer tree reorder, and drag reparent - Page snapshot undo for AI tool mutations - Fix collab sync for same-parent reorder — `node:reordered` events now propagated to Yjs peers +- Fix orphaned instances on clipboard paste — detach to FRAME when component is missing +- Fix text typography lost on Figma clipboard import — preserve fontFamily, fontWeight, fontSize, lineHeight +- Fix `copyFill` missing `gradientTransform` and `imageTransform` — gradient fills now round-trip correctly ### Performance @@ -46,6 +51,8 @@ - Enhanced AI system prompt with full JSX prop reference and verification workflow - Chat panel preserves messages when toggling UI visibility - SceneGraph event bus (nanoevents) — `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered` events replace monkey-patching in collab sync and manual render invalidation +- Replace esbuild-wasm (14 MB) with sucrase (201 KB) for JSX transform — `buildComponent()` and `renderJSX()` now synchronous and browser-compatible +- `useMagicKeys` keyboard shortcut system — replaces tinykeys with VueUse built-in, cross-platform Meta/Control handling, modifier exclusion for combo conflicts - Dev-only debug toolbar for copying chat logs - Auto-layout icons in layer tree — vertical (rows), horizontal (columns), and grid icons for auto-layout frames; components keep their purple diamond - Frame titles on canvas are now draggable — clicking a selected top-level frame's name label starts a drag diff --git a/PLAN.md b/PLAN.md index a6b6f1f10..b57cc6dc5 100644 --- a/PLAN.md +++ b/PLAN.md @@ -1066,7 +1066,7 @@ Components, instances, component sets with live sync and override preservation. ### Phase 5: AI integration ✅ -In-app AI chat (⌘J) with OpenRouter, 10 tools, streaming responses with tool call timeline. JSX renderer. Code panel with JSX export. +In-app AI chat (⌘J) with multi-provider support (Anthropic, OpenAI, Google AI, OpenRouter, compatible endpoints), 90+ tools, streaming responses with tool call timeline, visual verification via export_image. JSX renderer with sucrase. Code panel with JSX/Tailwind export. ### Phase 6: Collaboration ✅ @@ -1078,14 +1078,17 @@ Tauri v2 desktop app (macOS, Windows, Linux). Web app at app.openpencil.dev. CLI ### What's next -- **Multi-file / tabs** — open multiple documents in tabs within a single window -- **More AI providers** — Anthropic API, Claude Code subscription, Gemini, local models via Ollama -- **Code signing** — Apple & Azure certificates for properly signed desktop binaries -- **.fig compatibility** — improving import/export fidelity across a larger set of real-world files -- **Port all figma-use tools** — bring the full 118-tool set from [figma-use](https://github.com/dannote/figma-use) into the editor (currently 26/118) for complete AI agent design capabilities +- **Prototyping** — frame transitions, interaction triggers (click, hover, drag), overlay management, fullscreen preview mode +- **Shader effects (SkSL)** — custom visual effects via GPU shaders +- **Raster tile caching** — instant zoom/pan for complex documents +- **Component libraries** — publish, share, and consume design systems across files - **CI tools** — design linting, code export, visual regression in pipelines via the headless CLI -- **Prototyping** — frame transitions, interaction triggers, preview mode -- **SVG/PDF export** — vector export formats +- **Windows code signing** — Azure Authenticode certificates for properly signed binaries +- **Skewing and OkHCL color** — affine transforms and perceptually uniform color space +- **WebGPU/Graphite rendering** — experimental next-gen rendering backend +- **.fig compatibility** — improving import/export fidelity across a larger set of real-world files +- **Port remaining figma-use tools** — bring the full 118-tool set from [figma-use](https://github.com/dannote/figma-use) into the editor (currently 90+/118) +- **Grid child positioning UI** — column/row span controls in properties panel, grid overlay visualization on canvas --- diff --git a/README.md b/README.md index 81a530b7f..2d887b798 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Or download from the [releases page](https://github.com/open-pencil/open-pencil/ ## What it does - **Opens .fig files** — read and write native Figma files, copy & paste nodes between apps -- **AI builds designs** — describe what you want in chat, 90 tools create and modify nodes. Bring your own API key +- **AI builds designs** — describe what you want in chat, 90+ tools create and modify nodes. Connect Anthropic, OpenAI, Google AI, OpenRouter, or any compatible endpoint - **Fully programmable** — headless CLI, Figma Plugin API via `eval`, MCP server for AI agents - **Real-time collaboration** — P2P via WebRTC, no server, no account. Cursors, presence, follow mode - **Auto layout & CSS Grid** — flex and grid layout via Yoga WASM, with gap, padding, alignment, track sizing @@ -187,13 +187,14 @@ OpenPencil is the alternative: open source (MIT), reads .fig files natively, eve ## Roadmap -- 100% .fig compatibility — full rendering parity with Figma +- Prototyping — frame transitions, interaction triggers, overlay management, preview mode - Shader effects (SkSL) — custom visual effects via GPU shaders -- Skewing and OkHCL color support - Raster tile caching — instant zoom/pan for complex documents -- Component libraries — publish, share, and consume design systems +- Component libraries — publish, share, and consume design systems across files - CI tools — design linting, code export, visual regression in pipelines -- Windows code signing (Azure certificates for properly signed binaries) +- Grid child positioning UI — column/row span controls, grid overlay on canvas +- Skewing and OkHCL color support +- Windows code signing (Azure Authenticode certificates) - Experimental WebGPU/Graphite rendering backend ## Contributing @@ -233,12 +234,12 @@ tests/ E2E (188 tests) + unit (764 tests) | Layer | Tech | |-------|------| | Rendering | Skia (CanvasKit WASM) | -| Layout | Yoga WASM | +| Layout | Yoga WASM (flex + grid via [fork](https://github.com/open-pencil/yoga/tree/grid)) | | UI | Vue 3, Reka UI, Tailwind CSS 4 | | File format | Kiwi binary + Zstd + ZIP | | Collaboration | Trystero (WebRTC P2P) + Yjs (CRDT) | | Desktop | Tauri v2 | -| AI/MCP | OpenRouter, @modelcontextprotocol/sdk, Hono | +| AI/MCP | Multi-provider (Anthropic, OpenAI, Google AI, OpenRouter), MCP SDK, Hono | ### Desktop builds diff --git a/desktop/tauri.conf.json b/desktop/tauri.conf.json index ead4c5c95..ed47798c3 100644 --- a/desktop/tauri.conf.json +++ b/desktop/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://schema.tauri.app/config/2", "productName": "OpenPencil", - "version": "0.8.0", + "version": "0.9.0", "identifier": "net.dannote.open-pencil", "build": { "beforeDevCommand": "bun run dev", diff --git a/package.json b/package.json index 07cb9c096..eeb1ccbeb 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "open-pencil-app", "private": true, - "version": "0.8.0", + "version": "0.9.0", "license": "MIT", "type": "module", "workspaces": [ diff --git a/packages/cli/package.json b/packages/cli/package.json index a38e1d008..fc58cd9e5 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@open-pencil/cli", - "version": "0.8.0", + "version": "0.9.0", "license": "MIT", "type": "module", "bin": { diff --git a/packages/core/package.json b/packages/core/package.json index d2179fa12..59786f364 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@open-pencil/core", - "version": "0.8.0", + "version": "0.9.0", "license": "MIT", "type": "module", "exports": { diff --git a/packages/docs/de/guide/architecture.md b/packages/docs/de/guide/architecture.md index 9883cf7ea..30dba745d 100644 --- a/packages/docs/de/guide/architecture.md +++ b/packages/docs/de/guide/architecture.md @@ -45,11 +45,13 @@ Der Renderer ist in fokussierte Module in `packages/core/src/renderer/` aufgetei Flache `Map` mit GUID-Strings als Schlüssel. Baumstruktur über `parentIndex`-Referenzen. Bietet O(1)-Lookup, effiziente Traversierung, Hit-Testing und rechteckige Bereichsabfragen für Marquee-Selektion. +Der Graph emittiert typisierte Events über nanoevents: `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. Subsysteme abonnieren diese anstelle manueller Verdrahtung — der Editor nutzt sie für Render-Invalidierung und Microtask-gebatchte Komponenten-Instanz-Synchronisation, das Collab-System für Yjs-Propagierung. + Siehe [Szenengraph-Referenz](/reference/scene-graph) für Interna. ### Layout-Engine (Yoga WASM) -Metas Yoga bietet CSS-Flexbox-Layout-Berechnung. Ein dünner Adapter mappt Figma-Eigenschaftsnamen auf Yoga-Äquivalente: +Metas Yoga bietet CSS-Flexbox- und Grid-Layout-Berechnung über einen [Fork](https://github.com/open-pencil/yoga/tree/grid) mit CSS-Grid-Unterstützung. Ein dünner Adapter mappt Figma-Eigenschaftsnamen auf Yoga-Äquivalente: | Figma-Eigenschaft | Yoga-Äquivalent | |---|---| @@ -70,11 +72,11 @@ Siehe [Dateiformat-Referenz](/reference/file-format) für Details. Werkzeuge werden einmal in `packages/core/src/tools/` definiert, aufgeteilt nach Domäne: read, create, modify, structure, variables, vector, analyze. Jedes Werkzeug hat typisierte Parameter und eine `execute(figma, args)`-Funktion. Adapter konvertieren sie für: -- **KI-Chat** — valibot-Schemas, verbunden mit OpenRouter +- **KI-Chat** — valibot-Schemas, Multi-Provider (Anthropic, OpenAI, Google AI, OpenRouter, kompatible Endpunkte) - **MCP-Server** — zod-Schemas, stdio + HTTP-Transporte - **CLI** — verfügbar über den `eval`-Befehl -87 Core-Werkzeuge + 3 MCP-Dateiverwaltungswerkzeuge = 90 insgesamt. +90+ Core-Werkzeuge + 3 MCP-Dateiverwaltungswerkzeuge. Enthält XPath-Abfrage (`query_nodes`), JSX-Inspektion (`get_jsx`, `diff_jsx`), semantische Beschreibung (`describe`) und visionsbasierte Überprüfung (`export_image` gibt Bilder an das Modell zurück). ### Rückgängig/Wiederherstellen @@ -106,10 +108,6 @@ Die headless CLI unterstützt bereits `analyze colors/typography/spacing/cluster Frame-zu-Frame-Übergänge, Interaktions-Trigger (Klick, Hover, Ziehen), Overlay-Verwaltung und Vollbild-Vorschaumodus. -### CSS Grid Layout - -CSS Grid wird über einen [Yoga-Fork](https://github.com/open-pencil/yoga/tree/grid) mit Cherry-Picked Grid-PRs aus dem Upstream unterstützt. Wählen Sie einen Frame aus und klicken Sie auf das Grid-Symbol, um von Flex zu Grid zu wechseln. Konfigurieren Sie Spalten-/Zeilen-Tracks (fr, feste px, auto), Spalten- und Zeilenabstände und Padding pro Seite. - ### Windows Code Signing macOS-Binaries sind seit v0.6.0 signiert und notarisiert. Windows Authenticode-Signierung über Azure Code Signing ist geplant, um die SmartScreen-Warnung zu entfernen. diff --git a/packages/docs/de/guide/features.md b/packages/docs/de/guide/features.md index a8491aeef..939677efd 100644 --- a/packages/docs/de/guide/features.md +++ b/packages/docs/de/guide/features.md @@ -65,13 +65,15 @@ CLI: `open-pencil export design.fig -f jsx --style tailwind` ## KI-Chat -⌘J öffnet den KI-Assistenten. 87 Werkzeuge zum Erstellen von Formen, Setzen von Stilen, Verwalten von Layout, Arbeiten mit Komponenten und Variablen, Ausführen boolescher Operationen, Analysieren von Design-Tokens und Exportieren von Assets. Eigener OpenRouter-API-Key. +⌘J öffnet den KI-Assistenten. 90+ Werkzeuge zum Erstellen von Formen, Setzen von Stilen, Verwalten von Layout, Arbeiten mit Komponenten und Variablen, Ausführen boolescher Operationen, Analysieren von Design-Tokens und Exportieren von Assets. Verbinden Sie Anthropic, OpenAI, Google AI, OpenRouter oder einen kompatiblen Endpunkt. -Tool-Aufrufe werden als einklappbare Timeline-Einträge angezeigt. Modellauswahl mit Claude, Gemini, GPT, DeepSeek und weiteren. +Tool-Aufrufe werden als einklappbare Timeline-Einträge angezeigt. Visuelle Überprüfung — der Assistent rendert seine Arbeit und vergleicht sie mit Ihrer Anfrage. Vollständige Undo-Unterstützung für alle KI-Mutationen. + +Siehe [KI-Chat](/programmable/ai-chat) für Einrichtung und Anbieter-Details. ## MCP-Server -Claude Code, Cursor, Windsurf oder jeden MCP-Client verbinden, um `.fig`-Dateien headless zu lesen und zu schreiben. 90 Werkzeuge (87 Core + 3 Dateiverwaltung). Zwei Transporte: stdio und HTTP. +Claude Code, Cursor, Windsurf oder jeden MCP-Client verbinden, um `.fig`-Dateien headless zu lesen und zu schreiben. 90+ Werkzeuge. Zwei Transporte: stdio und HTTP. ```sh bun add -g @open-pencil/mcp diff --git a/packages/docs/de/guide/figma-comparison.md b/packages/docs/de/guide/figma-comparison.md index af6edaf7c..7a2a22cfc 100644 --- a/packages/docs/de/guide/figma-comparison.md +++ b/packages/docs/de/guide/figma-comparison.md @@ -28,7 +28,7 @@ Feature-für-Feature-Vergleich der Figma-Design-Funktionen mit dem aktuellen Imp | Benutzerdefinierte Dateiminiatur | 🔲 | Miniatur beim Export generiert, aber kein benutzerdefinierter Auswähler | | Nudge-Wert-Einstellungen | 🔲 | Standard 1px/10px; Figma erlaubt benutzerdefinierte Werte | | App-Menü (Browser-Modus) | ✅ | Datei, Bearbeiten, Ansicht, Objekt, Text, Anordnen; Tauri verwendet native Menüs | -| KI-Werkzeuge | 🟡 | 90 Werkzeuge via OpenRouter + MCP-Server; noch keine KI-generierten Bilder oder KI-Suche | +| KI-Werkzeuge | 🟡 | 90+ Werkzeuge via Anthropic, OpenAI, Google AI, OpenRouter + MCP-Server; noch keine KI-generierten Bilder oder KI-Suche | ## Ebenen & Formen diff --git a/packages/docs/de/guide/tech-stack.md b/packages/docs/de/guide/tech-stack.md index 1ead8b31c..981f099b4 100644 --- a/packages/docs/de/guide/tech-stack.md +++ b/packages/docs/de/guide/tech-stack.md @@ -12,7 +12,9 @@ | **Dateiformat** | Kiwi-Binär + Zstd | Figmas eigenes Format — kompakt, schnelles Parsen, .fig-kompatibel | | **Kollaboration** | Trystero + Yjs | P2P-WebRTC über MQTT-Signalisierung, CRDT-Sync, y-indexeddb-Persistenz | | **Farbe** | culori | Farbraum-Konvertierungen (HSV, RGB, Hex) | -| **KI/MCP** | MCP SDK + Hono | 87 Tools für KI-Coding-Werkzeuge, stdio- + HTTP-Transporte | +| **KI/MCP** | MCP SDK + Hono | 90+ Tools für KI-Coding-Werkzeuge, stdio- + HTTP-Transporte | +| **JSX-Transform** | Sucrase | 201 KB JSX → JS, synchron, browser-kompatibel | +| **Events** | nanoevents | 108 Bytes, typisierter Event-Emitter für SceneGraph-Mutationen | | **Desktop** | Tauri v2 | ~5 MB native App (vs. Electrons ~100 MB), Rust-Backend | | **Build** | Vite 7 | Schnelles HMR, native ES-Module | | **Testing** | Playwright + bun:test | Visuelle Regression (E2E) + schnelle Unit-Tests | @@ -26,7 +28,9 @@ { "canvaskit-wasm": "^0.40.0", "vue": "^3.5.29", - "yoga-layout": "^3.2.1", + "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2", + "nanoevents": "^9.1.0", + "sucrase": "^3.35.1", "reka-ui": "^2.8.2", "tailwindcss": "^4.2.1", "culori": "^4.0.2", @@ -60,4 +64,4 @@ Yoga wird von Meta gepflegt, ist auf Milliarden von React-Native-Geräten getest | Technologie | Zweck | Phase | |-----------|---------|-------| -| CSS Grid in Yoga | Grid-basiertes Auto-Layout | ✅ Unterstützt über [Yoga-Fork](https://github.com/open-pencil/yoga/tree/grid) | +| CSS Grid in Yoga | Grid-basiertes Auto-Layout | ✅ Unterstützt über [Yoga-Fork](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) | diff --git a/packages/docs/de/programmable/ai-chat.md b/packages/docs/de/programmable/ai-chat.md index bad21c464..74cd72954 100644 --- a/packages/docs/de/programmable/ai-chat.md +++ b/packages/docs/de/programmable/ai-chat.md @@ -1,47 +1,64 @@ --- title: KI-Chat -description: Integrierter KI-Assistent mit 87 Werkzeugen zum Erstellen und Bearbeiten von Designs. +description: Integrierter KI-Assistent mit über 90 Werkzeugen zum Erstellen und Bearbeiten von Designs. --- # KI-Chat -Drücke ⌘J (Ctrl + J), um den KI-Assistenten zu öffnen. Beschreibe, was du möchtest — er erstellt Formen, setzt Stile, verwaltet Layout, arbeitet mit Komponenten und analysiert dein Design. +Drücken Sie ⌘J (Ctrl + J), um den KI-Assistenten zu öffnen. Beschreiben Sie, was Sie möchten — er erstellt Formen, setzt Stile, verwaltet Layouts, arbeitet mit Komponenten und analysiert Ihr Design. ## Einrichtung -1. Öffne das KI-Chat-Panel (⌘J) -2. Klicke auf das Einstellungssymbol -3. Gib deinen OpenRouter API-Schlüssel ein -4. Wähle ein Modell (Claude, GPT-4, Gemini, etc.) +1. Öffnen Sie das KI-Chat-Panel (⌘J) +2. Klicken Sie auf das Einstellungs-Symbol +3. Wählen Sie einen Anbieter und geben Sie Ihren API-Schlüssel ein +4. Wählen Sie ein Modell -Kein Backend, kein Abonnement — dein Schlüssel kommuniziert direkt mit OpenRouter. +### Unterstützte Anbieter -## Was er kann +| Anbieter | Modelle | Einrichtung | +|----------|---------|-------------| +| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek u. a. | API-Schlüssel von [openrouter.ai](https://openrouter.ai) | +| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus usw. | API-Schlüssel von [console.anthropic.com](https://console.anthropic.com) | +| **OpenAI** | GPT-4o, GPT-4 usw. | API-Schlüssel von [platform.openai.com](https://platform.openai.com) | +| **Google AI** | Gemini 2.0, Gemini 1.5 usw. | API-Schlüssel von [aistudio.google.dev](https://aistudio.google.dev) | +| **OpenAI-kompatibel** | Jeder Endpunkt mit OpenAI-API-Format | Eigene Basis-URL + Schlüssel. Unterstützt Completions- und Responses-API-Umschaltung. | +| **Anthropic-kompatibel** | Jeder Endpunkt mit Anthropic-API-Format | Eigene Basis-URL + Schlüssel | -Der Assistent hat 87 Werkzeuge in diesen Kategorien: +Kein Backend, kein Abonnement — Ihr Schlüssel kommuniziert direkt mit dem Anbieter. + +## Funktionen + +Der Assistent verfügt über 90+ Werkzeuge in diesen Kategorien: - **Erstellen** — Frames, Formen, Text, Komponenten, Seiten. Rendert JSX für komplexe Layouts. -- **Gestalten** — Füllungen, Konturen, Effekte, Deckkraft, Eckenradius, Mischmodi. -- **Layout** — Auto-Layout, Ausrichtung, Abstände, Größenanpassung. -- **Komponenten** — Komponenten, Instanzen, Komponentensets erstellen. Überschreibungen verwalten. +- **Stylen** — Füllungen, Konturen, Effekte, Deckkraft, Eckenradius, Mischmodi. +- **Layout** — Auto-Layout, Grid, Ausrichtung, Abstände, Größenbestimmung. +- **Komponenten** — Komponenten, Instanzen, Komponentensätze erstellen. Überschreibungen verwalten. - **Variablen** — Variablen, Sammlungen, Modi erstellen/bearbeiten. An Füllungen binden. -- **Abfragen** — Knoten finden, Eigenschaften lesen, Seiten, Schriften, Auswahl auflisten. -- **Analysieren** — Farbpalette, Typografie-Audit, Abstandskonsistenz, Cluster-Erkennung. -- **Exportieren** — PNG, SVG, JSX mit Tailwind-Klassen. -- **Vektor** — Boolesche Operationen, Pfadbearbeitung. +- **Abfragen** — Knoten finden, XPath-Selektoren, Eigenschaften lesen, Seiten, Schriften, Auswahl auflisten. +- **Inspizieren** — `get_jsx` für JSX-Ansicht, `diff_jsx` für strukturelle Vergleiche, `describe` für semantische Rolle und Design-Probleme. +- **Analysieren** — Farbpalette, Typografie-Audit, Abstands-Konsistenz, Muster-Erkennung. +- **Exportieren** — PNG, SVG, JSX mit Tailwind-Klassen. Visuelle Überprüfung via `export_image`. +- **Vektor** — Boolesche Operationen, Pfadmanipulation. + +## Visuelle Überprüfung + +Der Assistent kann seine Arbeit visuell überprüfen. Nach dem Erstellen oder Ändern von Designs nutzt er `export_image`, um einen Screenshot aufzunehmen und das Ergebnis mit der ursprünglichen Anforderung zu vergleichen. ## Beispiel-Prompts - „Erstelle eine Karte mit Titel, Beschreibung und einem blauen Button" -- „Gib allen Buttons auf dieser Seite den gleichen Eckenradius" +- „Alle Buttons auf dieser Seite sollen denselben Eckenradius verwenden" - „Welche Schriften werden in dieser Datei verwendet?" - „Ändere den Hintergrund des ausgewählten Frames in einen Verlauf von Blau nach Lila" - „Exportiere den ausgewählten Frame als SVG" -- „Finde alle Textknoten mit einer Schriftgröße kleiner als 12" +- „Zeige mir das JSX für diesen Frame" ## Tipps -- Wähle Knoten aus, bevor du fragst — der Assistent weiß, was ausgewählt ist. -- Sei spezifisch bei Farben, Größen und Positionen für präzise Ergebnisse. +- Wählen Sie Knoten aus, bevor Sie fragen — der Assistent weiß, was ausgewählt ist. +- Seien Sie präzise bei Farben, Größen und Positionen für exakte Ergebnisse. - Der Assistent kann mehrere Knoten in einer Nachricht bearbeiten. -- Verwende „Rückgängig" im Editor, wenn dir das Ergebnis nicht gefällt. +- Nutzen Sie „Rückgängig" im Editor — KI-Mutationen unterstützen volles Undo. +- Alle Layouts werden nach jeder Werkzeugausführung automatisch neu berechnet. diff --git a/packages/docs/de/reference/keyboard-shortcuts.md b/packages/docs/de/reference/keyboard-shortcuts.md index 69e9d4a62..40a19e6f9 100644 --- a/packages/docs/de/reference/keyboard-shortcuts.md +++ b/packages/docs/de/reference/keyboard-shortcuts.md @@ -66,8 +66,10 @@ Vollständige Figma-kompatible Tastenkürzel-Übersicht. | ⌘= | Zoom In | ✅ | | ⌘- | Zoom Out | ✅ | | ⌘0 | Zoom to 100% | ✅ | -| ⌘1 | Zoom to Fit | 🔲 | -| ⌘2 | Zoom to Selection | 🔲 | +| ⌘1 | Zoom to Fit | ✅ | +| ⌘2 | Zoom to Selection | ✅ | +| ⇧1 | Zoom to Fit (alt) | ✅ | +| ⇧2 | Zoom to Selection (alt) | ✅ | | ⌘J | Toggle AI Chat | ✅ | ## Object diff --git a/packages/docs/de/user-guide/auto-layout.md b/packages/docs/de/user-guide/auto-layout.md index 9f78370e7..cb9c54b1f 100644 --- a/packages/docs/de/user-guide/auto-layout.md +++ b/packages/docs/de/user-guide/auto-layout.md @@ -1,11 +1,11 @@ --- title: Auto-Layout -description: Flexbox-basiertes Auto-Layout in OpenPencil — Richtung, Abstand, Polsterung, Ausrichtung und Kindgröße. +description: Flex- und Grid-Layout in OpenPencil — Richtung, Abstand, Polsterung, Ausrichtung, Kindgröße und CSS-Grid-Tracks. --- # Auto-Layout -Auto-Layout positioniert Kinder automatisch innerhalb eines Frames nach Flexbox-Regeln. Es verwaltet Richtung, Abstände, Ausrichtung und responsive Größenanpassung. +Auto-Layout positioniert Kinder automatisch innerhalb eines Frames. Es unterstützt zwei Modi: **Flex** (horizontaler/vertikaler Fluss) und **Grid** (Zeilen und Spalten mit Track-Größen). ## Auto-Layout aktivieren @@ -62,7 +62,36 @@ Innerhalb eines Auto-Layout-Frames können Sie ein Kind ziehen, um es unter Gesc |--------|-----|-----------------| | Auto-Layout umschalten | ⇧A | Shift + A | +## CSS Grid + +Grid-Layout ordnet Kinder in Zeilen und Spalten mit expliziter Track-Größe an. + +### Grid aktivieren + +Wählen Sie einen Frame mit aktiviertem Auto-Layout und klicken Sie auf das Grid-Symbol in der Layout-Werkzeugleiste, um von Flex zu Grid zu wechseln. + +### Track-Größen + +Definieren Sie Spalten- und Zeilen-Tracks mit drei Größenmodi: + +- **fr** — proportionale Einheit, teilt verfügbaren Platz proportional +- **px** — feste Pixelgröße +- **auto** — passt sich dem Inhalt an + +### Grid-Abstände + +Setzen Sie separate horizontale (Spalten-) und vertikale (Zeilen-) Abstände zwischen Zellen. + +### Kind-Positionierung + +Kinder werden automatisch in Grid-Zellen in Zeilenreihenfolge platziert. Sie können die Platzierung mit Spalten-/Zeilen-Start und Span-Werten in den Layout-Eigenschaften des Kindes überschreiben. + +### JSX- und Tailwind-Export + +Grid-Layouts werden als JSX mit Tailwind-Klassen exportiert: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`. + ## Tipps - Verschachteln Sie Auto-Layout-Frames für komplexe responsive Layouts. - Verwenden Sie „Füllen", damit ein Kind den restlichen Platz einnimmt, wie `flex-grow: 1` in CSS. +- Verwenden Sie Grid für Dashboard-Layouts, Galerien und Formulare — alles mit zweidimensionaler Struktur. diff --git a/packages/docs/es/guide/architecture.md b/packages/docs/es/guide/architecture.md index 969bbd308..78d70a646 100644 --- a/packages/docs/es/guide/architecture.md +++ b/packages/docs/es/guide/architecture.md @@ -45,11 +45,13 @@ El renderer está dividido en módulos enfocados en `packages/core/src/renderer/ `Map` plano con cadenas GUID como claves. Estructura de árbol vía referencias `parentIndex`. Proporciona búsqueda O(1), recorrido eficiente, hit testing y consultas de área rectangular para selección por marquesina. +El grafo emite eventos tipados mediante nanoevents: `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. Los subsistemas se suscriben a estos en lugar de cableado manual — el editor los usa para invalidación de render y sincronización de instancias de componentes con microtask batching, y el sistema de colaboración para propagación Yjs. + Véase [Referencia del grafo de escena](/reference/scene-graph) para los detalles internos. ### Motor de layout (Yoga WASM) -Yoga de Meta proporciona cálculo de layout CSS flexbox. Un adaptador delgado mapea nombres de propiedades de Figma a equivalentes de Yoga: +Yoga de Meta proporciona cálculo de layout CSS flexbox y grid a través de un [fork](https://github.com/open-pencil/yoga/tree/grid) con soporte CSS Grid. Un adaptador delgado mapea nombres de propiedades de Figma a equivalentes de Yoga: | Propiedad Figma | Equivalente Yoga | |---|---| @@ -70,11 +72,11 @@ Véase [Referencia del formato de archivo](/reference/file-format) para más det Las herramientas se definen una vez en `packages/core/src/tools/`, divididas por dominio: read, create, modify, structure, variables, vector, analyze. Cada herramienta tiene parámetros tipados y una función `execute(figma, args)`. Los adaptadores las convierten para: -- **Chat IA** — schemas valibot, conectados a OpenRouter +- **Chat IA** — schemas valibot, multi-proveedor (Anthropic, OpenAI, Google AI, OpenRouter, endpoints compatibles) - **Servidor MCP** — schemas zod, transportes stdio + HTTP - **CLI** — disponibles vía el comando `eval` -87 herramientas core + 3 herramientas de gestión de archivos MCP = 90 en total. +90+ herramientas core + 3 herramientas de gestión de archivos MCP. Incluye consulta XPath (`query_nodes`), inspección JSX (`get_jsx`, `diff_jsx`), descripción semántica (`describe`) y verificación visual (`export_image` devuelve imágenes al modelo). ### Deshacer/Rehacer @@ -106,10 +108,6 @@ El CLI headless ya soporta `analyze colors/typography/spacing/clusters`. Próxim Transiciones entre frames, triggers de interacción (clic, hover, arrastre), gestión de overlays y modo de vista previa a pantalla completa. -### Layout CSS Grid - -CSS Grid está soportado a través de un [fork de Yoga](https://github.com/open-pencil/yoga/tree/grid) con PRs de grid cherry-picked del upstream. Selecciona un frame, haz clic en el icono de grid para cambiar de flex a grid. Configura tracks de columnas/filas (fr, px fijos, auto), gaps de columna y fila, y padding por lado. - ### Firma de código en Windows Los binarios de macOS están firmados y notarizados desde la v0.6.0. La firma Authenticode de Windows vía Azure Code Signing está planificada para eliminar la advertencia de SmartScreen. diff --git a/packages/docs/es/guide/features.md b/packages/docs/es/guide/features.md index b435d8989..22eccbe20 100644 --- a/packages/docs/es/guide/features.md +++ b/packages/docs/es/guide/features.md @@ -65,13 +65,15 @@ CLI: `open-pencil export design.fig -f jsx --style tailwind` ## Chat IA -Pulsa ⌘J para abrir el asistente IA. 87 herramientas que pueden crear formas, aplicar estilos, gestionar layout, trabajar con componentes y variables, ejecutar operaciones booleanas, analizar tokens de diseño y exportar assets. Trae tu propia clave API de OpenRouter. +Pulsa ⌘J para abrir el asistente IA. 90+ herramientas que pueden crear formas, aplicar estilos, gestionar layout, trabajar con componentes y variables, ejecutar operaciones booleanas, analizar tokens de diseño y exportar assets. Conecta Anthropic, OpenAI, Google AI, OpenRouter o cualquier endpoint compatible. -Las llamadas a herramientas se muestran como entradas colapsables en una línea de tiempo. Selector de modelo con Claude, Gemini, GPT, DeepSeek y otros. +Las llamadas a herramientas se muestran como entradas colapsables. Verificación visual — el asistente renderiza su trabajo y lo compara con tu solicitud. Soporte completo de deshacer para todas las mutaciones de IA. + +Ver [Chat IA](/programmable/ai-chat) para configuración y detalles de proveedores. ## Servidor MCP -Conecta Claude Code, Cursor, Windsurf, o cualquier cliente MCP para leer y escribir archivos `.fig` de forma headless. 90 herramientas (87 core + 3 de gestión de archivos). Dos transportes: stdio y HTTP. +Conecta Claude Code, Cursor, Windsurf, o cualquier cliente MCP para leer y escribir archivos `.fig` de forma headless. 90+ herramientas. Dos transportes: stdio y HTTP. ```sh bun add -g @open-pencil/mcp diff --git a/packages/docs/es/guide/figma-comparison.md b/packages/docs/es/guide/figma-comparison.md index 167ad74b2..264ea1e9f 100644 --- a/packages/docs/es/guide/figma-comparison.md +++ b/packages/docs/es/guide/figma-comparison.md @@ -28,7 +28,7 @@ Comparación característica por característica de las capacidades de Figma Des | Miniaturas personalizadas | 🔲 | Miniatura generada en export, pero sin selector de miniatura personalizada | | Configuración de valores de nudge | 🔲 | Por defecto 1px/10px; Figma permite valores personalizados | | Menú de app (modo navegador) | ✅ | Menús Archivo, Editar, Ver, Objeto, Texto, Organizar; Tauri usa menús nativos | -| Herramientas IA | 🟡 | 90 herramientas vía OpenRouter + servidor MCP; sin imágenes generadas por IA ni búsqueda IA aún | +| Herramientas IA | 🟡 | 90+ herramientas vía Anthropic, OpenAI, Google AI, OpenRouter + servidor MCP; sin imágenes generadas por IA ni búsqueda IA aún | ## Capas y formas @@ -215,7 +215,7 @@ Comparación característica por característica de las capacidades de Figma Des | Code Connect | 🔲 | Vincular componentes de diseño a código | | Fragmentos de código | 🟡 | Export JSX con resaltado y copia; sin fragmentos CSS/Swift/Kotlin | | Figma for VS Code | 🔲 | Integración con plugin de editor | -| Servidor MCP | ✅ | @open-pencil/mcp con transportes stdio + HTTP; 87 herramientas core + 3 de gestión de archivos = 90 total | +| Servidor MCP | ✅ | @open-pencil/mcp con transportes stdio + HTTP; 87 herramientas core + 3 de gestión de archivos = 90+ total | | Herramientas CLI | ✅ | CLI headless: info, tree, find, export, analyze, node, pages, variables, eval; servidor MCP | ## Figma Draw diff --git a/packages/docs/es/guide/tech-stack.md b/packages/docs/es/guide/tech-stack.md index 0cb11c8bc..73066e9d9 100644 --- a/packages/docs/es/guide/tech-stack.md +++ b/packages/docs/es/guide/tech-stack.md @@ -12,7 +12,11 @@ | **Formato de archivo** | Kiwi binario + Zstd | Formato propio de Figma — compacto, parseo rápido, compatible con .fig | | **Colaboración** | Trystero + Yjs | P2P WebRTC vía señalización MQTT, sync CRDT, persistencia y-indexeddb | | **Color** | culori | Conversiones de espacio de color (HSV, RGB, hex) | -| **IA/MCP** | MCP SDK + Hono | 87 herramientas para codificación IA, transportes stdio + HTTP | +| **IA/MCP** | MCP SDK + Hono | 90+ herramientas para codificación IA, transportes stdio + HTTP | +| **JSX Transform** | Sucrase | 201 KB JSX → JS, síncrono, compatible con navegador | +| **Eventos** | nanoevents | 108 bytes, emisor de eventos tipado para mutaciones de SceneGraph | +| **JSX Transform** | Sucrase | 201 KB JSX → JS, síncrono, compatible con navegador | +| **Eventos** | nanoevents | 108 bytes, emisor de eventos tipado para mutaciones de SceneGraph | | **Desktop** | Tauri v2 | ~5 MB app nativa (vs ~100 MB de Electron), backend Rust | | **Build** | Vite 7 | HMR rápido, módulos ES nativos | | **Testing** | Playwright + bun:test | Regresión visual (E2E) + tests unitarios rápidos | @@ -26,7 +30,9 @@ { "canvaskit-wasm": "^0.40.0", "vue": "^3.5.29", - "yoga-layout": "^3.2.1", + "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2", + "nanoevents": "^9.1.0", + "sucrase": "^3.35.1", "reka-ui": "^2.8.2", "tailwindcss": "^4.2.1", "culori": "^4.0.2", @@ -60,4 +66,4 @@ Yoga es mantenido por Meta, probado en miles de millones de dispositivos React N | Tecnología | Propósito | Fase | |-----------|---------|-------| -| CSS Grid en Yoga | Auto layout basado en grid | ✅ Soportado vía [fork de Yoga](https://github.com/open-pencil/yoga/tree/grid) | +| CSS Grid en Yoga | Auto layout basado en grid | ✅ Incluido vía [fork de Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) | diff --git a/packages/docs/es/programmable/ai-chat.md b/packages/docs/es/programmable/ai-chat.md index 433ca6fbb..3342eb8e1 100644 --- a/packages/docs/es/programmable/ai-chat.md +++ b/packages/docs/es/programmable/ai-chat.md @@ -1,47 +1,64 @@ --- -title: Chat con IA -description: Asistente de IA integrado con 87 herramientas para crear y modificar diseños. +title: Chat IA +description: Asistente IA integrado con más de 90 herramientas para crear y modificar diseños. --- -# Chat con IA +# Chat IA -Pulsa ⌘J (Ctrl + J) para abrir el asistente de IA. Describe lo que quieres — crea formas, establece estilos, gestiona el layout, trabaja con componentes y analiza tu diseño. +Presiona ⌘J (Ctrl + J) para abrir el asistente IA. Describe lo que quieres — crea formas, establece estilos, gestiona el layout, trabaja con componentes y analiza tu diseño. ## Configuración -1. Abre el panel de chat con IA (⌘J) +1. Abre el panel de chat IA (⌘J) 2. Haz clic en el icono de ajustes -3. Introduce tu clave de API de OpenRouter -4. Elige un modelo (Claude, GPT-4, Gemini, etc.) +3. Elige un proveedor e introduce tu clave API +4. Selecciona un modelo -Sin backend, sin suscripción — tu clave se comunica directamente con OpenRouter. +### Proveedores compatibles -## Qué Puede Hacer +| Proveedor | Modelos | Configuración | +|-----------|---------|---------------| +| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek y otros | Clave API de [openrouter.ai](https://openrouter.ai) | +| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus, etc. | Clave API de [console.anthropic.com](https://console.anthropic.com) | +| **OpenAI** | GPT-4o, GPT-4, etc. | Clave API de [platform.openai.com](https://platform.openai.com) | +| **Google AI** | Gemini 2.0, Gemini 1.5, etc. | Clave API de [aistudio.google.dev](https://aistudio.google.dev) | +| **Compatible con OpenAI** | Cualquier endpoint con formato de API OpenAI | URL base personalizada + clave. Admite alternancia entre API de Completions y Responses. | +| **Compatible con Anthropic** | Cualquier endpoint con formato de API Anthropic | URL base personalizada + clave | -El asistente tiene 87 herramientas en estas categorías: +Sin backend, sin suscripción — tu clave se comunica directamente con el proveedor. + +## Funciones + +El asistente tiene más de 90 herramientas en estas categorías: - **Crear** — frames, formas, texto, componentes, páginas. Renderiza JSX para layouts complejos. -- **Estilo** — rellenos, bordes, efectos, opacidad, radio de esquina, modos de fusión. -- **Layout** — auto-layout, alineación, espaciado, dimensionamiento. +- **Estilo** — rellenos, contornos, efectos, opacidad, radio de borde, modos de fusión. +- **Layout** — auto-layout, grid, alineación, espaciado, dimensionamiento. - **Componentes** — crear componentes, instancias, conjuntos de componentes. Gestionar sobrecargas. - **Variables** — crear/editar variables, colecciones, modos. Vincular a rellenos. -- **Consultar** — buscar nodos, leer propiedades, listar páginas, fuentes, selección. -- **Analizar** — paleta de colores, auditoría tipográfica, consistencia de espaciado, detección de clusters. -- **Exportar** — PNG, SVG, JSX con clases Tailwind. +- **Consultar** — buscar nodos, selectores XPath, leer propiedades, listar páginas, fuentes, selección. +- **Inspeccionar** — `get_jsx` para vista JSX, `diff_jsx` para diferencias estructurales, `describe` para rol semántico y problemas de diseño. +- **Analizar** — paleta de colores, auditoría tipográfica, consistencia de espaciado, detección de patrones. +- **Exportar** — PNG, SVG, JSX con clases Tailwind. Verificación visual mediante `export_image`. - **Vector** — operaciones booleanas, manipulación de trazados. -## Prompts de Ejemplo +## Verificación visual -- "Crea una tarjeta con un título, descripción y un botón azul" +El asistente puede verificar su trabajo visualmente. Después de crear o modificar diseños, utiliza `export_image` para capturar una imagen y verificar el resultado contra la solicitud original. + +## Ejemplos de prompts + +- "Crea una tarjeta con título, descripción y un botón azul" - "Haz que todos los botones de esta página usen el mismo radio de borde" - "¿Qué fuentes se usan en este archivo?" -- "Cambia el fondo del frame seleccionado a un degradado de azul a púrpura" +- "Cambia el fondo del frame seleccionado a un degradado de azul a morado" - "Exporta el frame seleccionado como SVG" -- "Encuentra todos los nodos de texto con tamaño de fuente menor a 12" +- "Muéstrame el JSX de este frame" ## Consejos - Selecciona nodos antes de preguntar — el asistente sabe qué está seleccionado. - Sé específico con colores, tamaños y posiciones para resultados precisos. - El asistente puede modificar múltiples nodos en un solo mensaje. -- Usa "deshacer" en el editor si no te gusta el resultado. +- Usa "deshacer" en el editor — las mutaciones de IA admiten deshacer completo. +- Todos los layouts se recalculan automáticamente después de cada ejecución de herramienta. diff --git a/packages/docs/es/reference/keyboard-shortcuts.md b/packages/docs/es/reference/keyboard-shortcuts.md index 2c9aa2621..8ad82f278 100644 --- a/packages/docs/es/reference/keyboard-shortcuts.md +++ b/packages/docs/es/reference/keyboard-shortcuts.md @@ -66,8 +66,10 @@ Mapa completo de atajos compatibles con Figma. | ⌘= | Zoom In | ✅ | | ⌘- | Zoom Out | ✅ | | ⌘0 | Zoom to 100% | ✅ | -| ⌘1 | Zoom to Fit | 🔲 | -| ⌘2 | Zoom to Selection | 🔲 | +| ⌘1 | Zoom to Fit | ✅ | +| ⌘2 | Zoom to Selection | ✅ | +| ⇧1 | Zoom to Fit (alt) | ✅ | +| ⇧2 | Zoom to Selection (alt) | ✅ | | ⌘J | Toggle AI Chat | ✅ | ## Object diff --git a/packages/docs/es/user-guide/auto-layout.md b/packages/docs/es/user-guide/auto-layout.md index a809a8655..5f2b227c7 100644 --- a/packages/docs/es/user-guide/auto-layout.md +++ b/packages/docs/es/user-guide/auto-layout.md @@ -1,10 +1,10 @@ --- title: Auto-layout -description: Auto-layout basado en flexbox en OpenPencil. +description: Layout flex y grid en OpenPencil — dirección, espaciado, padding, alineación, dimensionamiento y tracks CSS Grid. --- # Auto-layout -El auto-layout posiciona los hijos automáticamente dentro de un marco usando reglas de flexbox. Controla la dirección, el espaciado, la alineación y el dimensionamiento responsivo. +El auto-layout posiciona los hijos automáticamente dentro de un marco. Soporta dos modos: **flex** (flujo horizontal/vertical) y **grid** (filas y columnas con dimensionamiento de tracks). ## Activar auto-layout @@ -27,3 +27,31 @@ El auto-layout posiciona los hijos automáticamente dentro de un marco usando re - **Fijo** — ancho/alto explícito - **Rellenar** — se expande en el espacio disponible - **Ajustar** — se reduce al contenido + +## CSS Grid + +El layout grid organiza los hijos en filas y columnas con dimensionamiento explícito de tracks. + +### Activar Grid + +Selecciona un marco con auto-layout activado y haz clic en el icono de cuadrícula en la barra de herramientas de layout para cambiar de flex a grid. + +### Dimensionamiento de tracks + +Define tracks de columnas y filas con tres modos: + +- **fr** — unidad fraccional, divide el espacio disponible proporcionalmente +- **px** — tamaño fijo en píxeles +- **auto** — se ajusta al contenido + +### Espaciado del grid + +Establece gaps horizontales (columnas) y verticales (filas) separados entre celdas. + +### Posicionamiento de hijos + +Los hijos se colocan en las celdas del grid automáticamente en orden de fila. Puedes sobrescribir la ubicación con valores de inicio de columna/fila y span en las propiedades de layout del hijo. + +### Exportación JSX y Tailwind + +Los layouts grid se exportan como JSX con clases Tailwind: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`. diff --git a/packages/docs/fr/guide/architecture.md b/packages/docs/fr/guide/architecture.md index 8e1ddee4e..a60796820 100644 --- a/packages/docs/fr/guide/architecture.md +++ b/packages/docs/fr/guide/architecture.md @@ -45,11 +45,13 @@ Le renderer est découpé en modules spécialisés dans `packages/core/src/rende `Map` plat indexé par des chaînes GUID. Structure en arbre via des références `parentIndex`. Fournit une recherche O(1), un parcours efficace, du hit testing et des requêtes par zone rectangulaire pour la sélection par marquise. +Le graphe émet des événements typés via nanoevents : `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. Les sous-systèmes s'y abonnent au lieu d'un câblage manuel — l'éditeur les utilise pour l'invalidation du rendu et la synchronisation d'instances de composants batchée par microtâche, le système de collaboration pour la propagation Yjs. + Voir la [Référence du graphe de scène](/reference/scene-graph) pour les détails internes. ### Moteur de layout (Yoga WASM) -Yoga de Meta fournit le calcul de layout CSS flexbox. Un adaptateur fin mappe les noms de propriétés Figma vers les équivalents Yoga : +Yoga de Meta fournit le calcul de layout CSS flexbox et grid via un [fork](https://github.com/open-pencil/yoga/tree/grid) avec support CSS Grid. Un adaptateur fin mappe les noms de propriétés Figma vers les équivalents Yoga : | Propriété Figma | Équivalent Yoga | |---|---| @@ -70,11 +72,11 @@ Voir la [Référence du format de fichier](/reference/file-format) pour plus de Les outils sont définis une seule fois dans `packages/core/src/tools/`, découpés par domaine : read, create, modify, structure, variables, vector, analyze. Chaque outil a des paramètres typés et une fonction `execute(figma, args)`. Les adaptateurs les convertissent pour : -- **Chat IA** — schémas valibot, connecté à OpenRouter +- **Chat IA** — schémas valibot, multi-fournisseur (Anthropic, OpenAI, Google AI, OpenRouter, endpoints compatibles) - **Serveur MCP** — schémas zod, transports stdio + HTTP - **CLI** — accessible via la commande `eval` -87 outils core + 3 outils de gestion de fichiers MCP = 90 au total. +90+ outils core + 3 outils de gestion de fichiers MCP. Inclut requête XPath (`query_nodes`), inspection JSX (`get_jsx`, `diff_jsx`), description sémantique (`describe`) et vérification visuelle (`export_image` renvoie des images au modèle). ### Annuler/Rétablir @@ -106,10 +108,6 @@ Le CLI headless supporte déjà `analyze colors/typography/spacing/clusters`. Pr Transitions frame-à-frame, déclencheurs d'interaction (clic, survol, glissement), gestion des overlays et mode aperçu plein écran. -### Layout CSS Grid - -CSS Grid est supporté via un [fork de Yoga](https://github.com/open-pencil/yoga/tree/grid) avec des PRs grid cherry-picked de l'upstream. Sélectionnez un frame, cliquez sur l'icône grille pour passer de flex à grid. Configurez les tracks colonnes/lignes (fr, px fixes, auto), les gaps colonnes et lignes, et le padding par côté. - ### Signature de code Windows Les binaires macOS sont signés et notarisés depuis la v0.6.0. La signature Authenticode Windows via Azure Code Signing est prévue pour supprimer l'avertissement SmartScreen. diff --git a/packages/docs/fr/guide/features.md b/packages/docs/fr/guide/features.md index df9392240..8cdfcc3e5 100644 --- a/packages/docs/fr/guide/features.md +++ b/packages/docs/fr/guide/features.md @@ -65,13 +65,15 @@ CLI : `open-pencil export design.fig -f jsx --style tailwind` ## Chat IA -Appuyez sur ⌘J pour ouvrir l'assistant IA. 87 outils qui peuvent créer des formes, définir des styles, gérer le layout, travailler avec les composants et variables, exécuter des opérations booléennes, analyser les tokens de design et exporter des assets. Apportez votre propre clé API OpenRouter. +Appuyez sur ⌘J pour ouvrir l'assistant IA. 90+ outils qui peuvent créer des formes, définir des styles, gérer le layout, travailler avec les composants et variables, exécuter des opérations booléennes, analyser les tokens de design et exporter des assets. Connectez Anthropic, OpenAI, Google AI, OpenRouter ou tout endpoint compatible. -Les appels d'outils s'affichent comme des entrées de chronologie dépliables. Sélecteur de modèle avec Claude, Gemini, GPT, DeepSeek et d'autres. +Les appels d'outils s'affichent comme des entrées dépliables. Vérification visuelle — l'assistant rend son travail et le compare avec votre demande. Support complet de l'annulation pour toutes les mutations IA. + +Voir [Chat IA](/programmable/ai-chat) pour la configuration et les détails des fournisseurs. ## Serveur MCP -Connectez Claude Code, Cursor, Windsurf ou tout client MCP pour lire et écrire des fichiers `.fig` en mode headless. 90 outils (87 core + 3 gestion de fichiers). Deux transports : stdio et HTTP. +Connectez Claude Code, Cursor, Windsurf ou tout client MCP pour lire et écrire des fichiers `.fig` en mode headless. 90+ outils. Deux transports : stdio et HTTP. ```sh bun add -g @open-pencil/mcp diff --git a/packages/docs/fr/guide/figma-comparison.md b/packages/docs/fr/guide/figma-comparison.md index 20aa911ea..df539a35d 100644 --- a/packages/docs/fr/guide/figma-comparison.md +++ b/packages/docs/fr/guide/figma-comparison.md @@ -28,7 +28,7 @@ Comparaison fonctionnalité par fonctionnalité des capacités de Figma Design a | Miniatures personnalisées | 🔲 | Miniature générée à l'export, mais pas de sélecteur personnalisé | | Réglages de valeur de nudge | 🔲 | Défaut 1px/10px ; Figma permet des valeurs personnalisées | | Menu de l'app (mode navigateur) | ✅ | Menus Fichier, Édition, Affichage, Objet, Texte, Disposition ; Tauri utilise les menus natifs | -| Outils IA | 🟡 | 90 outils via OpenRouter + serveur MCP ; pas d'images générées par IA ni de recherche IA encore | +| Outils IA | 🟡 | 90+ outils via Anthropic, OpenAI, Google AI, OpenRouter + serveur MCP ; pas d'images générées par IA ni de recherche IA encore | ## Calques et formes @@ -215,7 +215,7 @@ Comparaison fonctionnalité par fonctionnalité des capacités de Figma Design a | Code Connect | 🔲 | Lier composants de design au code | | Extraits de code | 🟡 | Export JSX avec coloration et copie ; pas d'extraits CSS/Swift/Kotlin | | Figma for VS Code | 🔲 | Intégration plugin éditeur | -| Serveur MCP | ✅ | @open-pencil/mcp avec transports stdio + HTTP ; 87 outils core + 3 gestion de fichiers = 90 total | +| Serveur MCP | ✅ | @open-pencil/mcp avec transports stdio + HTTP ; 90+ outils core + 3 gestion de fichiers = 90+ total | | Outils CLI | ✅ | CLI headless : info, tree, find, export, analyze, node, pages, variables, eval ; serveur MCP | ## Figma Draw diff --git a/packages/docs/fr/guide/tech-stack.md b/packages/docs/fr/guide/tech-stack.md index b5eb40041..bccccfaed 100644 --- a/packages/docs/fr/guide/tech-stack.md +++ b/packages/docs/fr/guide/tech-stack.md @@ -12,7 +12,11 @@ | **Format de fichier** | Kiwi binaire + Zstd | Format propre de Figma — compact, parsing rapide, compatible .fig | | **Collaboration** | Trystero + Yjs | P2P WebRTC via signalisation MQTT, sync CRDT, persistance y-indexeddb | | **Couleur** | culori | Conversions d'espaces colorimétriques (HSV, RGB, hex) | -| **IA/MCP** | MCP SDK + Hono | 87 outils pour le codage IA, transports stdio + HTTP | +| **IA/MCP** | MCP SDK + Hono | 90+ outils pour le codage IA, transports stdio + HTTP | +| **Transform JSX** | Sucrase | 201 Ko JSX → JS, synchrone, compatible navigateur | +| **Événements** | nanoevents | 108 octets, émetteur typé pour les mutations du SceneGraph | +| **Transform JSX** | Sucrase | 201 Ko JSX → JS, synchrone, compatible navigateur | +| **Événements** | nanoevents | 108 octets, émetteur typé pour les mutations du SceneGraph | | **Desktop** | Tauri v2 | ~5 Mo app native (vs ~100 Mo d'Electron), backend Rust | | **Build** | Vite 7 | HMR rapide, modules ES natifs | | **Test** | Playwright + bun:test | Régression visuelle (E2E) + tests unitaires rapides | @@ -26,7 +30,9 @@ { "canvaskit-wasm": "^0.40.0", "vue": "^3.5.29", - "yoga-layout": "^3.2.1", + "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2", + "nanoevents": "^9.1.0", + "sucrase": "^3.35.1", "reka-ui": "^2.8.2", "tailwindcss": "^4.2.1", "culori": "^4.0.2", @@ -60,4 +66,4 @@ Yoga est maintenu par Meta, éprouvé sur des milliards d'appareils React Native | Technologie | Objectif | Phase | |-----------|---------|-------| -| CSS Grid dans Yoga | Auto layout basé sur une grille | ✅ Supporté via [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) | +| CSS Grid dans Yoga | Auto layout basé sur une grille | ✅ Livré via [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) | diff --git a/packages/docs/fr/programmable/ai-chat.md b/packages/docs/fr/programmable/ai-chat.md index ccaea411b..c6464edff 100644 --- a/packages/docs/fr/programmable/ai-chat.md +++ b/packages/docs/fr/programmable/ai-chat.md @@ -1,6 +1,6 @@ --- title: Chat IA -description: Assistant IA intégré avec 87 outils pour créer et modifier des designs. +description: Assistant IA intégré avec plus de 90 outils pour créer et modifier des designs. --- # Chat IA @@ -11,25 +11,41 @@ Appuyez sur ⌘J (Ctrl + J) pour ouv 1. Ouvrez le panneau de chat IA (⌘J) 2. Cliquez sur l'icône de paramètres -3. Entrez votre clé API OpenRouter -4. Choisissez un modèle (Claude, GPT-4, Gemini, etc.) +3. Choisissez un fournisseur et entrez votre clé API +4. Sélectionnez un modèle -Pas de backend, pas d'abonnement — votre clé communique directement avec OpenRouter. +### Fournisseurs pris en charge -## Ce qu'il peut faire +| Fournisseur | Modèles | Configuration | +|-------------|---------|---------------| +| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek et autres | Clé API de [openrouter.ai](https://openrouter.ai) | +| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus, etc. | Clé API de [console.anthropic.com](https://console.anthropic.com) | +| **OpenAI** | GPT-4o, GPT-4, etc. | Clé API de [platform.openai.com](https://platform.openai.com) | +| **Google AI** | Gemini 2.0, Gemini 1.5, etc. | Clé API de [aistudio.google.dev](https://aistudio.google.dev) | +| **Compatible OpenAI** | Tout endpoint au format API OpenAI | URL de base personnalisée + clé. Supporte le basculement entre API Completions et Responses. | +| **Compatible Anthropic** | Tout endpoint au format API Anthropic | URL de base personnalisée + clé | -L'assistant dispose de 87 outils répartis dans ces catégories : +Pas de backend, pas d'abonnement — votre clé communique directement avec le fournisseur. + +## Fonctionnalités + +L'assistant dispose de plus de 90 outils répartis dans ces catégories : - **Créer** — frames, formes, texte, composants, pages. Rendu JSX pour les mises en page complexes. - **Styliser** — remplissages, contours, effets, opacité, rayon d'arrondi, modes de fusion. -- **Mise en page** — auto-layout, alignement, espacement, dimensionnement. +- **Mise en page** — auto-layout, grille, alignement, espacement, dimensionnement. - **Composants** — créer des composants, des instances, des ensembles de composants. Gérer les surcharges. - **Variables** — créer/modifier des variables, des collections, des modes. Lier aux remplissages. -- **Requêter** — trouver des nœuds, lire des propriétés, lister les pages, les polices, la sélection. +- **Requêter** — trouver des nœuds, sélecteurs XPath, lire des propriétés, lister les pages, les polices, la sélection. +- **Inspecter** — `get_jsx` pour la vue JSX, `diff_jsx` pour les différences structurelles, `describe` pour le rôle sémantique et les problèmes de design. - **Analyser** — palette de couleurs, audit typographique, cohérence de l'espacement, détection de motifs récurrents. -- **Exporter** — PNG, SVG, JSX avec classes Tailwind. +- **Exporter** — PNG, SVG, JSX avec classes Tailwind. Vérification visuelle via `export_image`. - **Vectoriel** — opérations booléennes, manipulation de chemins. +## Vérification visuelle + +L'assistant peut vérifier visuellement son travail. Après avoir créé ou modifié des designs, il utilise `export_image` pour capturer une image et vérifier le résultat par rapport à la demande initiale. + ## Exemples de prompts - « Créer une carte avec un titre, une description et un bouton bleu » @@ -37,11 +53,12 @@ L'assistant dispose de 87 outils répartis dans ces catégories : - « Quelles polices sont utilisées dans ce fichier ? » - « Changer l'arrière-plan du frame sélectionné en un dégradé du bleu au violet » - « Exporter le frame sélectionné en SVG » -- « Trouver tous les nœuds de texte avec une taille de police inférieure à 12 » +- « Montre-moi le JSX de ce frame » ## Conseils - Sélectionnez des nœuds avant de poser votre question — l'assistant sait ce qui est sélectionné. - Soyez précis sur les couleurs, tailles et positions pour des résultats exacts. - L'assistant peut modifier plusieurs nœuds en un seul message. -- Utilisez « annuler » dans l'éditeur si le résultat ne vous convient pas. +- Utilisez « annuler » dans l'éditeur — les mutations IA supportent l'annulation complète. +- Tous les layouts sont recalculés automatiquement après chaque exécution d'outil. diff --git a/packages/docs/fr/reference/keyboard-shortcuts.md b/packages/docs/fr/reference/keyboard-shortcuts.md index 46b11065a..03d10cbb1 100644 --- a/packages/docs/fr/reference/keyboard-shortcuts.md +++ b/packages/docs/fr/reference/keyboard-shortcuts.md @@ -66,8 +66,10 @@ Carte complète des raccourcis compatibles Figma. | ⌘= | Zoom In | ✅ | | ⌘- | Zoom Out | ✅ | | ⌘0 | Zoom to 100% | ✅ | -| ⌘1 | Zoom to Fit | 🔲 | -| ⌘2 | Zoom to Selection | 🔲 | +| ⌘1 | Zoom to Fit | ✅ | +| ⌘2 | Zoom to Selection | ✅ | +| ⇧1 | Zoom to Fit (alt) | ✅ | +| ⇧2 | Zoom to Selection (alt) | ✅ | | ⌘J | Toggle AI Chat | ✅ | ## Object diff --git a/packages/docs/fr/user-guide/auto-layout.md b/packages/docs/fr/user-guide/auto-layout.md index 66077c52a..0761be229 100644 --- a/packages/docs/fr/user-guide/auto-layout.md +++ b/packages/docs/fr/user-guide/auto-layout.md @@ -1,10 +1,10 @@ --- title: Mise en page auto -description: Mise en page auto basée sur flexbox dans OpenPencil. +description: Layout flex et grille dans OpenPencil — direction, espacement, padding, alignement, dimensionnement et tracks CSS Grid. --- # Mise en page auto -La mise en page auto positionne automatiquement les enfants dans un cadre selon les règles flexbox. Elle gère la direction, l'espacement, l'alignement et le dimensionnement adaptatif. +La mise en page auto positionne automatiquement les enfants dans un cadre. Deux modes sont pris en charge : **flex** (flux horizontal/vertical) et **grille** (lignes et colonnes avec dimensionnement de pistes). ⇧A pour activer/désactiver ou envelopper la sélection. @@ -24,3 +24,31 @@ La mise en page auto positionne automatiquement les enfants dans un cadre selon - **Fixe** — largeur/hauteur explicite - **Remplir** — s'étend dans l'espace disponible - **Ajuster** — se réduit au contenu + +## CSS Grid + +Le layout en grille organise les enfants en lignes et colonnes avec un dimensionnement de pistes explicite. + +### Activer la grille + +Sélectionnez un cadre avec auto-layout activé et cliquez sur l'icône grille dans la barre d'outils layout pour passer de flex à grille. + +### Dimensionnement des pistes + +Définissez les pistes de colonnes et de lignes avec trois modes : + +- **fr** — unité fractionnaire, divise l'espace disponible proportionnellement +- **px** — taille fixe en pixels +- **auto** — s'adapte au contenu + +### Espacement de la grille + +Définissez des gaps horizontaux (colonnes) et verticaux (lignes) séparés entre les cellules. + +### Positionnement des enfants + +Les enfants sont placés dans les cellules de la grille automatiquement en ordre de ligne. Vous pouvez surcharger le placement avec des valeurs de début de colonne/ligne et d'étendue dans les propriétés layout de l'enfant. + +### Export JSX et Tailwind + +Les layouts en grille s'exportent en JSX avec des classes Tailwind : `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`. diff --git a/packages/docs/guide/architecture.md b/packages/docs/guide/architecture.md index 24f4020cf..782ec2414 100644 --- a/packages/docs/guide/architecture.md +++ b/packages/docs/guide/architecture.md @@ -45,11 +45,13 @@ The renderer is split into focused modules in `packages/core/src/renderer/`: sce Flat `Map` keyed by GUID strings. Tree structure via `parentIndex` references. Provides O(1) lookup, efficient traversal, hit testing, and rectangular area queries for marquee selection. +The graph emits typed events via nanoevents: `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. Subsystems subscribe to these instead of manual call-site wiring — the editor uses them for render invalidation and microtask-batched component instance sync, while the collab system uses them for Yjs propagation. + See [Scene Graph Reference](/reference/scene-graph) for internals. ### Layout Engine (Yoga WASM) -Meta's Yoga provides CSS flexbox layout computation. A thin adapter maps Figma property names to Yoga equivalents: +Meta's Yoga provides CSS flexbox and grid layout computation via a [fork](https://github.com/open-pencil/yoga/tree/grid) with CSS Grid support. A thin adapter maps Figma property names to Yoga equivalents: | Figma Property | Yoga Equivalent | |---|---| @@ -70,11 +72,11 @@ See [File Format Reference](/reference/file-format) for details. Tools are defined once in `packages/core/src/tools/`, split by domain: read, create, modify, structure, variables, vector, analyze. Each tool has typed params and an `execute(figma, args)` function. Adapters convert them for: -- **AI chat** — valibot schemas, wired to OpenRouter +- **AI chat** — valibot schemas, multi-provider (Anthropic, OpenAI, Google AI, OpenRouter, compatible endpoints) - **MCP server** — zod schemas, stdio + HTTP transports - **CLI** — available via the `eval` command -87 core tools + 3 MCP file management tools = 90 total. +90+ core tools + 3 MCP file management tools. Includes XPath query (`query_nodes`), JSX inspection (`get_jsx`, `diff_jsx`), semantic description (`describe`), and vision-based verification (`export_image` returns images to the model). ### Undo/Redo @@ -106,10 +108,6 @@ The headless CLI already supports `analyze colors/typography/spacing/clusters`. Frame-to-frame transitions, interaction triggers (click, hover, drag), overlay management, and fullscreen preview mode. -### CSS Grid Layout - -CSS Grid is supported via a [Yoga fork](https://github.com/open-pencil/yoga/tree/grid) with cherry-picked grid PRs from upstream. Select a frame, click the grid icon to switch from flex to grid. Configure column/row tracks (fr, fixed px, auto), column and row gaps, and per-side padding. - ### Windows Code Signing macOS binaries are signed and notarized since v0.6.0. Windows Authenticode signing via Azure Code Signing is planned to remove the SmartScreen warning. diff --git a/packages/docs/guide/features.md b/packages/docs/guide/features.md index 4bf6ad4cf..48456e30c 100644 --- a/packages/docs/guide/features.md +++ b/packages/docs/guide/features.md @@ -65,13 +65,15 @@ CLI: `open-pencil export design.fig -f jsx --style tailwind` ## AI Chat -Press ⌘J to open the AI assistant. 87 tools that can create shapes, set styles, manage layout, work with components and variables, run boolean operations, analyze design tokens, and export assets. Bring your own OpenRouter API key. +Press ⌘J to open the AI assistant. 90+ tools that can create shapes, set styles, manage layout, work with components and variables, run boolean operations, analyze design tokens, and export assets. Connect Anthropic, OpenAI, Google AI, OpenRouter, or any compatible endpoint. -Tool calls display as collapsible timeline entries. Model selector with Claude, Gemini, GPT, DeepSeek, and others. +Tool calls display as collapsible timeline entries. Visual verification — the assistant renders its work and checks it against your request. Full undo support for all AI mutations. + +See [AI Chat](/programmable/ai-chat) for setup and provider details. ## MCP Server -Connect Claude Code, Cursor, Windsurf, or any MCP client to read and write `.fig` files headlessly. 90 tools (87 core + 3 file management). Two transports: stdio and HTTP. +Connect Claude Code, Cursor, Windsurf, or any MCP client to read and write `.fig` files headlessly. 90+ tools. Two transports: stdio and HTTP. ```sh bun add -g @open-pencil/mcp diff --git a/packages/docs/guide/figma-comparison.md b/packages/docs/guide/figma-comparison.md index 7f06b98fd..9322802cf 100644 --- a/packages/docs/guide/figma-comparison.md +++ b/packages/docs/guide/figma-comparison.md @@ -16,7 +16,7 @@ Feature-by-feature comparison of Figma Design capabilities with Open Pencil's cu | Layers panel (left sidebar) | ✅ | Tree view with expand/collapse, drag reorder, visibility toggle; resizable width | | Pages panel | ✅ | Add, delete, rename pages; per-page viewport state | | Properties panel (right sidebar) | ✅ | Sections: Appearance, Fill, Stroke, Effects, Typography, Layout, Position; resizable width | -| Zoom & pan | ✅ | Ctrl + scroll, pinch, ⌘+ / ⌘− / ⌘0, Space + drag, middle mouse, hand tool (H) | +| Zoom & pan | ✅ | Ctrl + scroll, pinch, ⌘+ / ⌘− / ⌘0 (100%) / ⌘1 (fit) / ⌘2 (selection), Space + drag, middle mouse, hand tool (H) | | Canvas rulers | ✅ | Top/left rulers with selection highlight bands and coordinate badges | | Canvas background color | ✅ | Per-page background via properties panel | | Canvas guides | 🔲 | Figma supports draggable guides from rulers | diff --git a/packages/docs/guide/tech-stack.md b/packages/docs/guide/tech-stack.md index 3f66e5118..10d6166f4 100644 --- a/packages/docs/guide/tech-stack.md +++ b/packages/docs/guide/tech-stack.md @@ -12,7 +12,9 @@ | **File Format** | Kiwi binary + Zstd | Figma's own format — compact, fast parsing, .fig compatible | | **Collaboration** | Trystero + Yjs | P2P WebRTC via MQTT signaling, CRDT sync, y-indexeddb persistence | | **Color** | culori | Color space conversions (HSV, RGB, hex) | -| **AI/MCP** | MCP SDK + Hono | 87 tools for AI coding tools, stdio + HTTP transports | +| **AI/MCP** | MCP SDK + Hono | 90+ tools for AI coding tools, stdio + HTTP transports | +| **JSX Transform** | Sucrase | Lightweight (201 KB) JSX → JS, synchronous, browser-compatible | +| **Events** | nanoevents | 108 bytes, typed event emitter for SceneGraph mutations | | **Desktop** | Tauri v2 | ~5MB native app (vs Electron's ~100MB), Rust backend | | **Build** | Vite 7 | Fast HMR, native ES modules | | **Testing** | Playwright + bun:test | Visual regression (E2E) + fast unit tests | @@ -26,7 +28,9 @@ { "canvaskit-wasm": "^0.40.0", "vue": "^3.5.29", - "yoga-layout": "^3.2.1", + "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2", + "nanoevents": "^9.1.0", + "sucrase": "^3.35.1", "reka-ui": "^2.8.2", "tailwindcss": "^4.2.1", "culori": "^4.0.2", @@ -60,4 +64,4 @@ Yoga is maintained by Meta, battle-tested across billions of React Native device | Technology | Purpose | Phase | |-----------|---------|-------| -| CSS Grid in Yoga | Grid-based auto layout | ✅ Supported via [Yoga fork](https://github.com/open-pencil/yoga/tree/grid) | +| CSS Grid in Yoga | Grid-based auto layout | ✅ Shipped via [Yoga fork](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) | diff --git a/packages/docs/it/guide/architecture.md b/packages/docs/it/guide/architecture.md index da8fb4cc3..152cbd38c 100644 --- a/packages/docs/it/guide/architecture.md +++ b/packages/docs/it/guide/architecture.md @@ -45,11 +45,13 @@ Il renderer è suddiviso in moduli specializzati in `packages/core/src/renderer/ `Map` piatto indicizzato da stringhe GUID. Struttura ad albero tramite riferimenti `parentIndex`. Fornisce lookup O(1), attraversamento efficiente, hit testing e query per area rettangolare per la selezione con marquee. +Il grafo emette eventi tipizzati tramite nanoevents: `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. I sottosistemi si iscrivono a questi eventi invece del cablaggio manuale — l'editor li usa per l'invalidazione del render e la sincronizzazione delle istanze dei componenti con microtask batching, il sistema di collaborazione per la propagazione Yjs. + Consulta il [riferimento Scene Graph](/it/reference/scene-graph) per i dettagli interni. ### Motore di Layout (Yoga WASM) -Yoga di Meta fornisce il calcolo del layout CSS flexbox. Un adattatore sottile mappa i nomi delle proprietà Figma agli equivalenti Yoga: +Yoga di Meta fornisce il calcolo del layout CSS flexbox e grid tramite un [fork](https://github.com/open-pencil/yoga/tree/grid) con supporto CSS Grid. Un adattatore sottile mappa i nomi delle proprietà Figma agli equivalenti Yoga: | Proprietà Figma | Equivalente Yoga | |---|---| @@ -70,11 +72,11 @@ Consulta il [riferimento Formato File](/it/reference/file-format) per i dettagli Gli strumenti sono definiti una sola volta in `packages/core/src/tools/`, suddivisi per dominio: read, create, modify, structure, variables, vector, analyze. Ogni strumento ha parametri tipizzati e una funzione `execute(figma, args)`. Gli adattatori li convertono per: -- **Chat AI** — schema valibot, collegati a OpenRouter +- **Chat AI** — schema valibot, multi-provider (Anthropic, OpenAI, Google AI, OpenRouter, endpoint compatibili) - **Server MCP** — schema zod, trasporti stdio + HTTP - **CLI** — disponibili tramite il comando `eval` -87 strumenti core + 3 strumenti di gestione file MCP = 90 totali. +90+ strumenti core + 3 strumenti di gestione file MCP. Include query XPath (`query_nodes`), ispezione JSX (`get_jsx`, `diff_jsx`), descrizione semantica (`describe`) e verifica visiva (`export_image` restituisce immagini al modello). ### Annulla/Ripristina @@ -106,10 +108,6 @@ La CLI headless supporta già `analyze colors/typography/spacing/clusters`. Pros Transizioni frame-to-frame, trigger di interazione (clic, hover, trascinamento), gestione degli overlay e modalità anteprima a schermo intero. -### Layout CSS Grid - -CSS Grid è supportato tramite un [fork di Yoga](https://github.com/open-pencil/yoga/tree/grid) con PR grid cherry-picked dall'upstream. Seleziona un frame, clicca sull'icona griglia per passare da flex a grid. Configura track colonne/righe (fr, px fissi, auto), gap colonne e righe, e padding per lato. - ### Firma del Codice per Windows I binari macOS sono firmati e autenticati dalla v0.6.0. La firma Windows Authenticode tramite Azure Code Signing è pianificata per rimuovere l'avviso SmartScreen. diff --git a/packages/docs/it/guide/features.md b/packages/docs/it/guide/features.md index 1d765e262..6e1a363d4 100644 --- a/packages/docs/it/guide/features.md +++ b/packages/docs/it/guide/features.md @@ -65,13 +65,15 @@ CLI: `open-pencil export design.fig -f jsx --style tailwind` ## Chat AI -Premi ⌘J per aprire l'assistente AI. 87 strumenti che possono creare forme, impostare stili, gestire layout, lavorare con componenti e variabili, eseguire operazioni booleane, analizzare token di design ed esportare risorse. Porta la tua chiave API OpenRouter. +Premi ⌘J per aprire l'assistente AI. 90+ strumenti che possono creare forme, impostare stili, gestire layout, lavorare con componenti e variabili, eseguire operazioni booleane, analizzare token di design ed esportare risorse. Connetti Anthropic, OpenAI, Google AI, OpenRouter o qualsiasi endpoint compatibile. -Le chiamate agli strumenti vengono mostrate come voci di timeline comprimibili. Selettore modello con Claude, Gemini, GPT, DeepSeek e altri. +Le chiamate agli strumenti vengono mostrate come voci comprimibili. Verifica visiva — l'assistente renderizza il suo lavoro e lo confronta con la tua richiesta. Supporto completo per l'annullamento di tutte le mutazioni AI. + +Vedi [Chat AI](/programmable/ai-chat) per configurazione e dettagli sui provider. ## Server MCP -Connetti Claude Code, Cursor, Windsurf o qualsiasi client MCP per leggere e scrivere file `.fig` in modalità headless. 90 strumenti (87 core + 3 gestione file). Due trasporti: stdio e HTTP. +Connetti Claude Code, Cursor, Windsurf o qualsiasi client MCP per leggere e scrivere file `.fig` in modalità headless. 90+ strumenti. Due trasporti: stdio e HTTP. ```sh bun add -g @open-pencil/mcp diff --git a/packages/docs/it/guide/figma-comparison.md b/packages/docs/it/guide/figma-comparison.md index beb5cd4ee..ff4cf9e42 100644 --- a/packages/docs/it/guide/figma-comparison.md +++ b/packages/docs/it/guide/figma-comparison.md @@ -28,7 +28,7 @@ Confronto funzionalità per funzionalità delle capacità di Figma Design con lo | Miniature personalizzate | 🔲 | Miniatura generata all'export, ma nessun selettore personalizzato | | Impostazioni valore nudge | 🔲 | Default 1px/10px; Figma consente valori personalizzati | | Menu app (modalità browser) | ✅ | Menu File, Modifica, Visualizza, Oggetto, Testo, Disponi; Tauri usa menu nativi | -| Strumenti IA | 🟡 | 90 strumenti via OpenRouter + server MCP; nessuna immagine generata da IA o ricerca IA ancora | +| Strumenti IA | 🟡 | 90+ strumenti via Anthropic, OpenAI, Google AI, OpenRouter + server MCP; nessuna immagine generata da IA o ricerca IA ancora | ## Livelli e forme @@ -215,7 +215,7 @@ Confronto funzionalità per funzionalità delle capacità di Figma Design con lo | Code Connect | 🔲 | Collegare componenti design al codice | | Frammenti di codice | 🟡 | Export JSX con evidenziazione e copia; nessun frammento CSS/Swift/Kotlin | | Figma for VS Code | 🔲 | Integrazione plugin editor | -| Server MCP | ✅ | @open-pencil/mcp con trasporti stdio + HTTP; 87 strumenti core + 3 gestione file = 90 total | +| Server MCP | ✅ | @open-pencil/mcp con trasporti stdio + HTTP; 87 strumenti core + 3 gestione file = 90+ total | | Strumenti CLI | ✅ | CLI headless: info, tree, find, export, analyze, node, pages, variables, eval; server MCP | ## Figma Draw diff --git a/packages/docs/it/guide/tech-stack.md b/packages/docs/it/guide/tech-stack.md index 80bdf5d3f..e8e7e4847 100644 --- a/packages/docs/it/guide/tech-stack.md +++ b/packages/docs/it/guide/tech-stack.md @@ -12,7 +12,11 @@ | **Formato file** | Kiwi binario + Zstd | Formato proprio di Figma — compatto, parsing veloce, compatibile .fig | | **Collaborazione** | Trystero + Yjs | P2P WebRTC via segnalazione MQTT, sync CRDT, persistenza y-indexeddb | | **Colore** | culori | Conversioni spazio colore (HSV, RGB, hex) | -| **IA/MCP** | MCP SDK + Hono | 87 strumenti per il coding IA, trasporti stdio + HTTP | +| **IA/MCP** | MCP SDK + Hono | 90+ strumenti per il coding IA, trasporti stdio + HTTP | +| **JSX Transform** | Sucrase | 201 KB JSX → JS, sincrono, compatibile browser | +| **Eventi** | nanoevents | 108 byte, emettitore eventi tipizzato per mutazioni SceneGraph | +| **JSX Transform** | Sucrase | 201 KB JSX → JS, sincrono, compatibile browser | +| **Eventi** | nanoevents | 108 byte, emettitore eventi tipizzato per mutazioni SceneGraph | | **Desktop** | Tauri v2 | ~5 MB app nativa (vs ~100 MB di Electron), backend Rust | | **Build** | Vite 7 | HMR veloce, moduli ES nativi | | **Test** | Playwright + bun:test | Regressione visiva (E2E) + test unitari veloci | @@ -26,7 +30,9 @@ { "canvaskit-wasm": "^0.40.0", "vue": "^3.5.29", - "yoga-layout": "^3.2.1", + "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2", + "nanoevents": "^9.1.0", + "sucrase": "^3.35.1", "reka-ui": "^2.8.2", "tailwindcss": "^4.2.1", "culori": "^4.0.2", @@ -60,4 +66,4 @@ Yoga è mantenuto da Meta, collaudato su miliardi di dispositivi React Native e | Tecnologia | Scopo | Fase | |-----------|---------|-------| -| CSS Grid in Yoga | Auto layout basato su griglia | ✅ Supportato tramite [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) | +| CSS Grid in Yoga | Auto layout basato su griglia | ✅ Incluso tramite [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) | diff --git a/packages/docs/it/programmable/ai-chat.md b/packages/docs/it/programmable/ai-chat.md index 92d7643de..121e8023b 100644 --- a/packages/docs/it/programmable/ai-chat.md +++ b/packages/docs/it/programmable/ai-chat.md @@ -1,47 +1,64 @@ --- title: Chat IA -description: Assistente IA integrato con 87 strumenti per creare e modificare design. +description: Assistente IA integrato con oltre 90 strumenti per creare e modificare design. --- # Chat IA -Premi ⌘J (Ctrl + J) per aprire l'assistente IA. Descrivi ciò che vuoi — crea forme, imposta stili, gestisce il layout, lavora con i componenti e analizza il tuo design. +Premi ⌘J (Ctrl + J) per aprire l'assistente IA. Descrivi cosa vuoi — crea forme, imposta stili, gestisce il layout, lavora con i componenti e analizza il tuo design. ## Configurazione 1. Apri il pannello chat IA (⌘J) -2. Clicca l'icona delle impostazioni -3. Inserisci la tua chiave API OpenRouter -4. Scegli un modello (Claude, GPT-4, Gemini, ecc.) +2. Clicca sull'icona delle impostazioni +3. Scegli un provider e inserisci la tua chiave API +4. Seleziona un modello -Nessun backend, nessun abbonamento — la tua chiave comunica direttamente con OpenRouter. +### Provider supportati -## Cosa Può Fare +| Provider | Modelli | Configurazione | +|----------|---------|----------------| +| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek e altri | Chiave API da [openrouter.ai](https://openrouter.ai) | +| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus, ecc. | Chiave API da [console.anthropic.com](https://console.anthropic.com) | +| **OpenAI** | GPT-4o, GPT-4, ecc. | Chiave API da [platform.openai.com](https://platform.openai.com) | +| **Google AI** | Gemini 2.0, Gemini 1.5, ecc. | Chiave API da [aistudio.google.dev](https://aistudio.google.dev) | +| **Compatibile OpenAI** | Qualsiasi endpoint con formato API OpenAI | URL base personalizzato + chiave. Supporta toggle tra API Completions e Responses. | +| **Compatibile Anthropic** | Qualsiasi endpoint con formato API Anthropic | URL base personalizzato + chiave | -L'assistente ha 87 strumenti suddivisi in queste categorie: +Nessun backend, nessun abbonamento — la tua chiave comunica direttamente con il provider. -- **Creazione** — frame, forme, testo, componenti, pagine. Renderizza JSX per layout complessi. -- **Stile** — riempimenti, bordi, effetti, opacità, raggio degli angoli, metodi di fusione. -- **Layout** — auto-layout, allineamento, spaziatura, dimensionamento. -- **Componenti** — crea componenti, istanze, set di componenti. Gestisci le sovrascritture. -- **Variabili** — crea/modifica variabili, collezioni, modalità. Associa ai riempimenti. -- **Query** — trova nodi, leggi proprietà, elenca pagine, font, selezione. -- **Analisi** — palette colori, audit tipografico, coerenza della spaziatura, rilevamento cluster. -- **Esportazione** — PNG, SVG, JSX con classi Tailwind. -- **Vettoriale** — operazioni booleane, manipolazione dei tracciati. +## Funzionalità -## Esempi di Prompt +L'assistente dispone di oltre 90 strumenti in queste categorie: -- "Crea una card con un titolo, una descrizione e un pulsante blu" +- **Creare** — frame, forme, testo, componenti, pagine. Rendering JSX per layout complessi. +- **Stile** — riempimenti, contorni, effetti, opacità, raggio dei bordi, modalità di fusione. +- **Layout** — auto-layout, griglia, allineamento, spaziatura, dimensionamento. +- **Componenti** — creare componenti, istanze, set di componenti. Gestire le sovrascritture. +- **Variabili** — creare/modificare variabili, collezioni, modalità. Collegare ai riempimenti. +- **Query** — trovare nodi, selettori XPath, leggere proprietà, elencare pagine, font, selezione. +- **Ispezionare** — `get_jsx` per vista JSX, `diff_jsx` per differenze strutturali, `describe` per ruolo semantico e problemi di design. +- **Analizzare** — palette colori, audit tipografico, coerenza degli spazi, rilevamento di pattern. +- **Esportare** — PNG, SVG, JSX con classi Tailwind. Verifica visiva tramite `export_image`. +- **Vettoriale** — operazioni booleane, manipolazione tracciati. + +## Verifica visiva + +L'assistente può verificare visivamente il suo lavoro. Dopo aver creato o modificato design, utilizza `export_image` per catturare un'immagine e confrontare il risultato con la richiesta originale. + +## Esempi di prompt + +- "Crea una card con titolo, descrizione e un pulsante blu" - "Fai in modo che tutti i pulsanti di questa pagina usino lo stesso raggio dei bordi" - "Quali font sono usati in questo file?" - "Cambia lo sfondo del frame selezionato con un gradiente dal blu al viola" - "Esporta il frame selezionato come SVG" -- "Trova tutti i nodi di testo con dimensione font inferiore a 12" +- "Mostrami il JSX di questo frame" ## Suggerimenti - Seleziona i nodi prima di chiedere — l'assistente sa cosa è selezionato. - Sii specifico su colori, dimensioni e posizioni per risultati precisi. - L'assistente può modificare più nodi in un singolo messaggio. -- Usa "annulla" nell'editor se il risultato non ti piace. +- Usa "annulla" nell'editor — le mutazioni IA supportano l'annullamento completo. +- Tutti i layout vengono ricalcolati automaticamente dopo ogni esecuzione di strumento. diff --git a/packages/docs/it/reference/keyboard-shortcuts.md b/packages/docs/it/reference/keyboard-shortcuts.md index 72f03ef1a..c56a4b6b3 100644 --- a/packages/docs/it/reference/keyboard-shortcuts.md +++ b/packages/docs/it/reference/keyboard-shortcuts.md @@ -66,8 +66,10 @@ Mappa completa delle scorciatoie compatibili con Figma. | ⌘= | Zoom In | ✅ | | ⌘- | Zoom Out | ✅ | | ⌘0 | Zoom to 100% | ✅ | -| ⌘1 | Zoom to Fit | 🔲 | -| ⌘2 | Zoom to Selection | 🔲 | +| ⌘1 | Zoom to Fit | ✅ | +| ⌘2 | Zoom to Selection | ✅ | +| ⇧1 | Zoom to Fit (alt) | ✅ | +| ⇧2 | Zoom to Selection (alt) | ✅ | | ⌘J | Toggle AI Chat | ✅ | ## Object diff --git a/packages/docs/it/user-guide/auto-layout.md b/packages/docs/it/user-guide/auto-layout.md index d21c2358c..c664adbe4 100644 --- a/packages/docs/it/user-guide/auto-layout.md +++ b/packages/docs/it/user-guide/auto-layout.md @@ -1,10 +1,10 @@ --- title: Auto-layout -description: Auto-layout basato su flexbox in OpenPencil. +description: Layout flex e griglia in OpenPencil — direzione, spaziatura, padding, allineamento, dimensionamento e track CSS Grid. --- # Auto-layout -L'auto-layout posiziona i figli automaticamente all'interno di un frame usando regole flexbox. Gestisce direzione, spaziatura, allineamento e dimensionamento responsivo. +L'auto-layout posiziona i figli automaticamente all'interno di un frame. Supporta due modalità: **flex** (flusso orizzontale/verticale) e **griglia** (righe e colonne con dimensionamento dei track). ⇧A per attivare/disattivare o avvolgere la selezione in un frame auto-layout. @@ -27,3 +27,31 @@ L'auto-layout posiziona i figli automaticamente all'interno di un frame usando r ## Riordino per trascinamento Trascina un figlio per riordinarlo, con indicatore visuale di inserimento. + +## CSS Grid + +Il layout a griglia organizza i figli in righe e colonne con dimensionamento esplicito dei track. + +### Attivare la griglia + +Seleziona un frame con auto-layout attivo e clicca sull'icona griglia nella barra degli strumenti layout per passare da flex a griglia. + +### Dimensionamento dei track + +Definisci track di colonne e righe con tre modalità: + +- **fr** — unità frazionaria, divide lo spazio disponibile proporzionalmente +- **px** — dimensione fissa in pixel +- **auto** — si adatta al contenuto + +### Spaziatura della griglia + +Imposta gap orizzontali (colonne) e verticali (righe) separati tra le celle. + +### Posizionamento dei figli + +I figli vengono posizionati nelle celle della griglia automaticamente in ordine di riga. Puoi sovrascrivere il posizionamento con valori di inizio colonna/riga e span nelle proprietà layout del figlio. + +### Esportazione JSX e Tailwind + +I layout a griglia vengono esportati come JSX con classi Tailwind: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`. diff --git a/packages/docs/pl/guide/architecture.md b/packages/docs/pl/guide/architecture.md index d20a0b420..06149e48d 100644 --- a/packages/docs/pl/guide/architecture.md +++ b/packages/docs/pl/guide/architecture.md @@ -45,11 +45,13 @@ Renderer jest podzielony na wyspecjalizowane moduły w `packages/core/src/render Płaska `Map` indeksowana ciągami GUID. Struktura drzewa poprzez referencje `parentIndex`. Zapewnia wyszukiwanie O(1), wydajne przechodzenie, hit testing i zapytania obszarowe dla selekcji markerowej. +Graf emituje typowane zdarzenia przez nanoevents: `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. Podsystemy subskrybują te zdarzenia zamiast ręcznego okablowania — edytor używa ich do unieważniania renderowania i synchronizacji instancji komponentów z microtask batchingiem, system współpracy do propagacji Yjs. + Zobacz [Referencja grafu sceny](/reference/scene-graph) dla szczegółów wewnętrznych. ### Silnik layoutu (Yoga WASM) -Yoga od Mety zapewnia obliczanie layoutu CSS flexbox. Cienki adapter mapuje nazwy właściwości Figmy na odpowiedniki Yoga: +Yoga od Mety zapewnia obliczanie layoutu CSS flexbox i grid poprzez [fork](https://github.com/open-pencil/yoga/tree/grid) z obsługą CSS Grid. Cienki adapter mapuje nazwy właściwości Figmy na odpowiedniki Yoga: | Właściwość Figma | Odpowiednik Yoga | |---|---| @@ -70,11 +72,11 @@ Zobacz [Referencja formatu pliku](/reference/file-format) dla szczegółów. Narzędzia są definiowane raz w `packages/core/src/tools/`, podzielone wg domeny: read, create, modify, structure, variables, vector, analyze. Każde narzędzie ma typowane parametry i funkcję `execute(figma, args)`. Adaptery konwertują je dla: -- **Chat AI** — schematy valibot, podłączone do OpenRouter +- **Chat AI** — schematy valibot, multi-provider (Anthropic, OpenAI, Google AI, OpenRouter, kompatybilne endpointy) - **Serwer MCP** — schematy zod, transporty stdio + HTTP - **CLI** — dostępne przez komendę `eval` -87 narzędzi core + 3 narzędzia zarządzania plikami MCP = 90 łącznie. +90+ narzędzi core + 3 narzędzia zarządzania plikami MCP. Zawiera zapytania XPath (`query_nodes`), inspekcję JSX (`get_jsx`, `diff_jsx`), opis semantyczny (`describe`) i weryfikację wizualną (`export_image` zwraca obrazy do modelu). ### Cofnij/Ponów @@ -106,10 +108,6 @@ Headless CLI już obsługuje `analyze colors/typography/spacing/clusters`. Nast Przejścia między ramkami, wyzwalacze interakcji (kliknięcie, najechanie, przeciągnięcie), zarządzanie nakładkami i tryb podglądu pełnoekranowego. -### CSS Grid Layout - -CSS Grid jest obsługiwany przez [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) z cherry-picked PR-ami grid z upstream. Wybierz ramkę, kliknij ikonę siatki, aby przełączyć z flex na grid. Konfiguruj ścieżki kolumn/wierszy (fr, stałe px, auto), odstępy kolumn i wierszy oraz padding po każdej stronie. - ### Podpisywanie kodu Windows Binaria macOS są podpisane i notaryzowane od v0.6.0. Podpisywanie Windows Authenticode przez Azure Code Signing jest planowane aby usunąć ostrzeżenie SmartScreen. diff --git a/packages/docs/pl/guide/features.md b/packages/docs/pl/guide/features.md index 2e104e15d..95f7257cd 100644 --- a/packages/docs/pl/guide/features.md +++ b/packages/docs/pl/guide/features.md @@ -65,13 +65,15 @@ CLI: `open-pencil export design.fig -f jsx --style tailwind` ## Chat AI -Naciśnij ⌘J aby otworzyć asystenta AI. 87 narzędzi do tworzenia kształtów, ustawiania stylów, zarządzania layoutem, pracy z komponentami i zmiennymi, operacji boolowskich, analizy tokenów projektowych i eksportu zasobów. Użyj własnego klucza API OpenRouter. +Naciśnij ⌘J aby otworzyć asystenta AI. 90+ narzędzi do tworzenia kształtów, ustawiania stylów, zarządzania layoutem, pracy z komponentami i zmiennymi, operacji boolowskich, analizy tokenów projektowych i eksportu zasobów. Połącz Anthropic, OpenAI, Google AI, OpenRouter lub dowolny kompatybilny endpoint. -Wywołania narzędzi wyświetlane jako zwijane wpisy na osi czasu. Selektor modeli z Claude, Gemini, GPT, DeepSeek i innymi. +Wywołania narzędzi wyświetlane jako zwijane wpisy. Weryfikacja wizualna — asystent renderuje swoją pracę i porównuje z Twoim żądaniem. Pełne wsparcie cofania dla wszystkich mutacji AI. + +Zobacz [Czat AI](/programmable/ai-chat) dla konfiguracji i szczegółów dostawców. ## Serwer MCP -Podłącz Claude Code, Cursor, Windsurf lub dowolnego klienta MCP do odczytu i zapisu plików `.fig` headlessly. 90 narzędzi (87 core + 3 zarządzanie plikami). Dwa transporty: stdio i HTTP. +Podłącz Claude Code, Cursor, Windsurf lub dowolnego klienta MCP do odczytu i zapisu plików `.fig` headlessly. 90+ narzędzi. Dwa transporty: stdio i HTTP. ```sh bun add -g @open-pencil/mcp diff --git a/packages/docs/pl/guide/figma-comparison.md b/packages/docs/pl/guide/figma-comparison.md index 916df6ec5..f9dd0d6a3 100644 --- a/packages/docs/pl/guide/figma-comparison.md +++ b/packages/docs/pl/guide/figma-comparison.md @@ -28,7 +28,7 @@ Porównanie funkcja po funkcji możliwości Figma Design z aktualnym stanem impl | Niestandardowe miniatury | 🔲 | Miniatura generowana przy eksporcie, ale bez selektora | | Ustawienia wartości nudge | 🔲 | Domyślnie 1px/10px; Figma pozwala na wartości niestandardowe | | Menu aplikacji (tryb przeglądarkowy) | ✅ | Menu Plik, Edycja, Widok, Obiekt, Tekst, Rozmieszczenie; Tauri używa natywnych menu | -| Narzędzia AI | 🟡 | 90 narzędzi przez OpenRouter + serwer MCP; bez obrazów generowanych przez AI ani wyszukiwania AI jeszcze | +| Narzędzia AI | 🟡 | 90+ narzędzi przez Anthropic, OpenAI, Google AI, OpenRouter + serwer MCP; bez obrazów generowanych przez AI ani wyszukiwania AI jeszcze | ## Warstwy i kształty @@ -215,7 +215,7 @@ Porównanie funkcja po funkcji możliwości Figma Design z aktualnym stanem impl | Code Connect | 🔲 | Łączenie komponentów projektowych z kodem | | Fragmenty kodu | 🟡 | Eksport JSX z podświetlaniem i kopiowaniem; brak fragmentów CSS/Swift/Kotlin | | Figma for VS Code | 🔲 | Integracja z pluginem edytora | -| Serwer MCP | ✅ | @open-pencil/mcp z transportami stdio + HTTP; 87 narzędzi core + 3 zarządzanie plikami = 90 total | +| Serwer MCP | ✅ | @open-pencil/mcp z transportami stdio + HTTP; 87 narzędzi core + 3 zarządzanie plikami = 90+ total | | Narzędzia CLI | ✅ | Headless CLI: info, tree, find, export, analyze, node, pages, variables, eval; serwer MCP | ## Figma Draw diff --git a/packages/docs/pl/guide/tech-stack.md b/packages/docs/pl/guide/tech-stack.md index f65f64af6..c2bfe4fc9 100644 --- a/packages/docs/pl/guide/tech-stack.md +++ b/packages/docs/pl/guide/tech-stack.md @@ -12,7 +12,13 @@ | **Format pliku** | Kiwi binarny + Zstd | Własny format Figmy — kompaktowy, szybkie parsowanie, kompatybilny z .fig | | **Współpraca** | Trystero + Yjs | P2P WebRTC przez sygnalizację MQTT, sync CRDT, persystencja y-indexeddb | | **Kolor** | culori | Konwersje przestrzeni kolorów (HSV, RGB, hex) | -| **AI/MCP** | MCP SDK + Hono | 87 narzędzi dla kodowania AI, transporty stdio + HTTP | +| **AI/MCP** | MCP SDK + Hono | 90+ narzędzi dla kodowania AI, transporty stdio + HTTP | +| **JSX Transform** | Sucrase | 201 KB JSX → JS, synchroniczny, kompatybilny z przeglądarką | +| **Zdarzenia** | nanoevents | 108 bajtów, typowany emitter zdarzeń dla mutacji SceneGraph | +| **JSX Transform** | Sucrase | 201 KB JSX → JS, synchroniczny, kompatybilny z przeglądarką | +| **Zdarzenia** | nanoevents | 108 bajtów, typowany emitter zdarzeń dla mutacji SceneGraph | +| **JSX Transform** | Sucrase | Lightweight (201 KB) JSX → JS, synchronous, browser-compatible | +| **Events** | nanoevents | 108 bytes, typed event emitter for SceneGraph mutations | | **Desktop** | Tauri v2 | ~5 MB natywna aplikacja (vs ~100 MB Electrona), backend Rust | | **Build** | Vite 7 | Szybki HMR, natywne moduły ES | | **Testowanie** | Playwright + bun:test | Regresja wizualna (E2E) + szybkie testy jednostkowe | @@ -26,7 +32,9 @@ { "canvaskit-wasm": "^0.40.0", "vue": "^3.5.29", - "yoga-layout": "^3.2.1", + "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2", + "nanoevents": "^9.1.0", + "sucrase": "^3.35.1", "reka-ui": "^2.8.2", "tailwindcss": "^4.2.1", "culori": "^4.0.2", @@ -60,4 +68,4 @@ Yoga jest utrzymywana przez Metę, przetestowana na miliardach urządzeń React | Technologia | Cel | Faza | |-----------|---------|-------| -| CSS Grid w Yoga | Auto layout oparty na siatce | ✅ Obsługiwane przez [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) | +| CSS Grid w Yoga | Auto layout oparty na siatce | ✅ Obsługiwane przez [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) | diff --git a/packages/docs/pl/programmable/ai-chat.md b/packages/docs/pl/programmable/ai-chat.md index 71df14d1d..05fc89566 100644 --- a/packages/docs/pl/programmable/ai-chat.md +++ b/packages/docs/pl/programmable/ai-chat.md @@ -1,47 +1,64 @@ --- title: Czat AI -description: Wbudowany asystent AI z 87 narzędziami do tworzenia i modyfikowania projektów. +description: Wbudowany asystent AI z ponad 90 narzędziami do tworzenia i modyfikowania projektów. --- # Czat AI -Naciśnij ⌘J (Ctrl + J), aby otworzyć asystenta AI. Opisz czego chcesz — tworzy kształty, ustawia style, zarządza layoutem, pracuje z komponentami i analizuje Twój projekt. +Naciśnij ⌘J (Ctrl + J), aby otworzyć asystenta AI. Opisz, czego potrzebujesz — tworzy kształty, ustawia style, zarządza układem, pracuje z komponentami i analizuje projekt. ## Konfiguracja 1. Otwórz panel czatu AI (⌘J) 2. Kliknij ikonę ustawień -3. Wprowadź swój klucz API OpenRouter -4. Wybierz model (Claude, GPT-4, Gemini itp.) +3. Wybierz dostawcę i wprowadź klucz API +4. Wybierz model -Bez backendu, bez subskrypcji — Twój klucz komunikuje się bezpośrednio z OpenRouter. +### Obsługiwani dostawcy -## Możliwości +| Dostawca | Modele | Konfiguracja | +|----------|--------|--------------| +| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek i inne | Klucz API z [openrouter.ai](https://openrouter.ai) | +| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus itp. | Klucz API z [console.anthropic.com](https://console.anthropic.com) | +| **OpenAI** | GPT-4o, GPT-4 itp. | Klucz API z [platform.openai.com](https://platform.openai.com) | +| **Google AI** | Gemini 2.0, Gemini 1.5 itp. | Klucz API z [aistudio.google.dev](https://aistudio.google.dev) | +| **Kompatybilny z OpenAI** | Dowolny endpoint w formacie API OpenAI | Własny bazowy URL + klucz. Obsługuje przełączanie między API Completions i Responses. | +| **Kompatybilny z Anthropic** | Dowolny endpoint w formacie API Anthropic | Własny bazowy URL + klucz | -Asystent dysponuje 87 narzędziami w następujących kategoriach: +Bez backendu, bez subskrypcji — Twój klucz komunikuje się bezpośrednio z dostawcą. -- **Tworzenie** — ramki, kształty, tekst, komponenty, strony. Renderuje JSX dla złożonych layoutów. -- **Stylowanie** — wypełnienia, obrysy, efekty, przezroczystość, zaokrąglenie narożników, tryby mieszania. -- **Layout** — auto-layout, wyrównanie, odstępy, wymiarowanie. +## Funkcje + +Asystent ma ponad 90 narzędzi w tych kategoriach: + +- **Tworzenie** — ramki, kształty, tekst, komponenty, strony. Renderowanie JSX dla złożonych układów. +- **Styl** — wypełnienia, obrysy, efekty, przezroczystość, promień narożników, tryby mieszania. +- **Układ** — auto-layout, siatka, wyrównanie, odstępy, wymiarowanie. - **Komponenty** — tworzenie komponentów, instancji, zestawów komponentów. Zarządzanie nadpisaniami. -- **Zmienne** — tworzenie/edycja zmiennych, kolekcji, trybów. Wiązanie z wypełnieniami. -- **Zapytania** — wyszukiwanie węzłów, odczyt właściwości, listowanie stron, czcionek, zaznaczenia. -- **Analiza** — paleta kolorów, audyt typografii, spójność odstępów, wykrywanie klastrów. -- **Eksport** — PNG, SVG, JSX z klasami Tailwind. -- **Wektory** — operacje boolowskie, manipulacja ścieżkami. +- **Zmienne** — tworzenie/edycja zmiennych, kolekcji, trybów. Powiązanie z wypełnieniami. +- **Zapytania** — wyszukiwanie węzłów, selektory XPath, odczyt właściwości, listowanie stron, czcionek, zaznaczenia. +- **Inspekcja** — `get_jsx` dla widoku JSX, `diff_jsx` dla porównań strukturalnych, `describe` dla roli semantycznej i problemów projektowych. +- **Analiza** — paleta kolorów, audyt typografii, spójność odstępów, wykrywanie wzorców. +- **Eksport** — PNG, SVG, JSX z klasami Tailwind. Weryfikacja wizualna przez `export_image`. +- **Wektor** — operacje boolowskie, manipulacja ścieżkami. -## Przykładowe polecenia +## Weryfikacja wizualna + +Asystent może wizualnie weryfikować swoją pracę. Po utworzeniu lub zmodyfikowaniu projektów używa `export_image`, aby przechwycić obraz i sprawdzić wynik z pierwotnym żądaniem. + +## Przykładowe prompty - „Utwórz kartę z tytułem, opisem i niebieskim przyciskiem" -- „Ustaw taki sam border radius dla wszystkich przycisków na tej stronie" +- „Ustaw ten sam promień narożników dla wszystkich przycisków na tej stronie" - „Jakie czcionki są używane w tym pliku?" - „Zmień tło wybranej ramki na gradient od niebieskiego do fioletowego" -- „Wyeksportuj wybraną ramkę jako SVG" -- „Znajdź wszystkie węzły tekstowe z rozmiarem czcionki mniejszym niż 12" +- „Eksportuj wybraną ramkę jako SVG" +- „Pokaż mi JSX tego frame'a" ## Wskazówki -- Zaznacz węzły przed zapytaniem — asystent wie, co jest zaznaczone. -- Podawaj konkretne kolory, rozmiary i pozycje dla precyzyjnych rezultatów. +- Zaznacz węzły przed zadaniem pytania — asystent wie, co jest zaznaczone. +- Podawaj dokładne kolory, rozmiary i pozycje, aby uzyskać precyzyjne wyniki. - Asystent może modyfikować wiele węzłów w jednej wiadomości. -- Użyj „cofnij" w edytorze, jeśli nie podoba Ci się wynik. +- Użyj „cofnij" w edytorze — mutacje AI obsługują pełne cofanie. +- Wszystkie układy są automatycznie przeliczane po każdym wykonaniu narzędzia. diff --git a/packages/docs/pl/reference/keyboard-shortcuts.md b/packages/docs/pl/reference/keyboard-shortcuts.md index a8839772f..7af730c23 100644 --- a/packages/docs/pl/reference/keyboard-shortcuts.md +++ b/packages/docs/pl/reference/keyboard-shortcuts.md @@ -66,8 +66,10 @@ Pełna mapa skrótów kompatybilnych z Figmą. | ⌘= | Zoom In | ✅ | | ⌘- | Zoom Out | ✅ | | ⌘0 | Zoom to 100% | ✅ | -| ⌘1 | Zoom to Fit | 🔲 | -| ⌘2 | Zoom to Selection | 🔲 | +| ⌘1 | Zoom to Fit | ✅ | +| ⌘2 | Zoom to Selection | ✅ | +| ⇧1 | Zoom to Fit (alt) | ✅ | +| ⇧2 | Zoom to Selection (alt) | ✅ | | ⌘J | Toggle AI Chat | ✅ | ## Object diff --git a/packages/docs/pl/user-guide/auto-layout.md b/packages/docs/pl/user-guide/auto-layout.md index 97c964133..8f64eab0e 100644 --- a/packages/docs/pl/user-guide/auto-layout.md +++ b/packages/docs/pl/user-guide/auto-layout.md @@ -1,10 +1,10 @@ --- title: Auto-layout -description: Auto-layout oparty na flexbox w OpenPencil. +description: Layout flex i grid w OpenPencil — kierunek, odstępy, padding, wyrównanie, rozmiary i ścieżki CSS Grid. --- # Auto-layout -Auto-layout automatycznie pozycjonuje dzieci wewnątrz ramki, stosując reguły flexbox. Obsługuje kierunek, odstępy, wyrównanie i responsywne rozmiary. +Auto-layout automatycznie pozycjonuje dzieci wewnątrz ramki. Obsługuje dwa tryby: **flex** (przepływ poziomy/pionowy) i **grid** (wiersze i kolumny z wymiarowaniem ścieżek). ⇧A aby włączyć/wyłączyć lub opakować zaznaczenie. @@ -24,3 +24,31 @@ Auto-layout automatycznie pozycjonuje dzieci wewnątrz ramki, stosując reguły - **Stały** — jawna szerokość/wysokość - **Wypełnij** — rozciąga się w dostępnej przestrzeni - **Dopasuj** — kurczy się do zawartości + +## CSS Grid + +Layout siatkowy (grid) organizuje dzieci w wierszach i kolumnach z jawnym wymiarowaniem ścieżek. + +### Włączanie siatki + +Wybierz ramkę z włączonym auto-layout i kliknij ikonę siatki w pasku narzędzi layout, aby przełączyć z flex na grid. + +### Wymiarowanie ścieżek + +Zdefiniuj ścieżki kolumn i wierszy za pomocą trzech trybów: + +- **fr** — jednostka ułamkowa, dzieli dostępną przestrzeń proporcjonalnie +- **px** — stały rozmiar w pikselach +- **auto** — dopasowuje się do zawartości + +### Odstępy siatki + +Ustaw oddzielne odstępy poziome (kolumny) i pionowe (wiersze) między komórkami. + +### Pozycjonowanie dzieci + +Dzieci są umieszczane w komórkach siatki automatycznie w kolejności wierszy. Można nadpisać umieszczenie wartościami początku kolumny/wiersza i rozpiętości we właściwościach layout dziecka. + +### Eksport JSX i Tailwind + +Layouty siatkowe eksportują się jako JSX z klasami Tailwind: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`. diff --git a/packages/docs/programmable/ai-chat.md b/packages/docs/programmable/ai-chat.md index 864480015..8175afb6c 100644 --- a/packages/docs/programmable/ai-chat.md +++ b/packages/docs/programmable/ai-chat.md @@ -1,6 +1,6 @@ --- title: AI Chat -description: Built-in AI assistant with 87 tools for creating and modifying designs. +description: Built-in AI assistant with 90+ tools for creating and modifying designs. --- # AI Chat @@ -11,25 +11,41 @@ Press ⌘J (Ctrl + J) to open the AI 1. Open the AI chat panel (⌘J) 2. Click the settings icon -3. Enter your OpenRouter API key -4. Choose a model (Claude, GPT-4, Gemini, etc.) +3. Choose a provider and enter your API key +4. Select a model -No backend, no subscription — your key talks directly to OpenRouter. +### Supported Providers + +| Provider | Models | Setup | +|----------|--------|-------| +| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek, and others | API key from [openrouter.ai](https://openrouter.ai) | +| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus, etc. | API key from [console.anthropic.com](https://console.anthropic.com) | +| **OpenAI** | GPT-4o, GPT-4, etc. | API key from [platform.openai.com](https://platform.openai.com) | +| **Google AI** | Gemini 2.0, Gemini 1.5, etc. | API key from [aistudio.google.dev](https://aistudio.google.dev) | +| **OpenAI-compatible** | Any endpoint with OpenAI API format | Custom base URL + key. Supports Completions and Responses API toggle. | +| **Anthropic-compatible** | Any endpoint with Anthropic API format | Custom base URL + key | + +No backend, no subscription — your key talks directly to the provider. ## What It Can Do -The assistant has 87 tools across these categories: +The assistant has 90+ tools across these categories: - **Create** — frames, shapes, text, components, pages. Renders JSX for complex layouts. - **Style** — fills, strokes, effects, opacity, corner radius, blend modes. -- **Layout** — auto-layout, alignment, spacing, sizing. +- **Layout** — auto-layout, grid, alignment, spacing, sizing. - **Components** — create components, instances, component sets. Manage overrides. - **Variables** — create/edit variables, collections, modes. Bind to fills. -- **Query** — find nodes, read properties, list pages, fonts, selection. +- **Query** — find nodes, XPath selectors, read properties, list pages, fonts, selection. +- **Inspect** — `get_jsx` for JSX roundtrip view, `diff_jsx` for structural diffs, `describe` for semantic role and design issue detection. - **Analyze** — color palette, typography audit, spacing consistency, cluster detection. -- **Export** — PNG, SVG, JSX with Tailwind classes. +- **Export** — PNG, SVG, JSX with Tailwind classes. Vision-based verification via `export_image`. - **Vector** — boolean operations, path manipulation. +## Visual Verification + +The assistant can verify its work visually. After creating or modifying designs, it uses `export_image` to capture a screenshot and checks the result against the original request. This catches layout issues, missing elements, and color mismatches that text-only responses would miss. + ## Example Prompts - "Create a card with a title, description, and a blue button" @@ -38,10 +54,13 @@ The assistant has 87 tools across these categories: - "Change the background of the selected frame to a gradient from blue to purple" - "Export the selected frame as SVG" - "Find all text nodes with font size less than 12" +- "Describe the selected component — what role does it look like?" +- "Show me the JSX for this frame" ## Tips - Select nodes before asking — the assistant knows what's selected. - Be specific about colors, sizes, and positions for precise results. - The assistant can modify multiple nodes in one message. -- Use "undo" in the editor if you don't like the result. +- Use "undo" in the editor if you don't like the result — AI mutations support full undo. +- All layout is recomputed automatically after each tool execution. diff --git a/packages/docs/reference/keyboard-shortcuts.md b/packages/docs/reference/keyboard-shortcuts.md index ee284947a..36cd4be4c 100644 --- a/packages/docs/reference/keyboard-shortcuts.md +++ b/packages/docs/reference/keyboard-shortcuts.md @@ -68,8 +68,10 @@ Full Figma-compatible shortcut map. ✅ = implemented. | ⌘= | Zoom In | ✅ | | ⌘- | Zoom Out | ✅ | | ⌘0 | Zoom to 100% | ✅ | -| ⌘1 | Zoom to Fit | 🔲 | -| ⌘2 | Zoom to Selection | 🔲 | +| ⌘1 | Zoom to Fit | ✅ | +| ⌘2 | Zoom to Selection | ✅ | +| ⇧1 | Zoom to Fit (alt) | ✅ | +| ⇧2 | Zoom to Selection (alt) | ✅ | | ⌘J | Toggle AI Chat | ✅ | ## Object diff --git a/packages/docs/ru/guide/architecture.md b/packages/docs/ru/guide/architecture.md index ade455cd4..62d17f934 100644 --- a/packages/docs/ru/guide/architecture.md +++ b/packages/docs/ru/guide/architecture.md @@ -45,11 +45,13 @@ graph TB Плоская `Map` с ключами в виде строк GUID. Древовидная структура через ссылки `parentIndex`. Обеспечивает O(1) поиск, эффективный обход, проверку попадания и запросы по прямоугольным областям для выделения рамкой. +Граф порождает типизированные события через nanoevents: `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. Подсистемы подписываются на них вместо ручной привязки — редактор использует их для инвалидации рендера и синхронизации экземпляров компонентов с группировкой через microtask, система совместной работы — для распространения через Yjs. + См. [справочник графа сцены](/reference/scene-graph) для подробностей. ### Движок макетов (Yoga WASM) -Yoga от Meta обеспечивает вычисление макета CSS flexbox. Тонкий адаптер сопоставляет имена свойств Figma с эквивалентами Yoga: +Yoga от Meta обеспечивает вычисление макета CSS flexbox и grid через [форк](https://github.com/open-pencil/yoga/tree/grid) с поддержкой CSS Grid. Тонкий адаптер сопоставляет имена свойств Figma с эквивалентами Yoga: | Свойство Figma | Эквивалент Yoga | |---|---| @@ -70,11 +72,11 @@ Yoga от Meta обеспечивает вычисление макета CSS fl Инструменты определяются один раз в `packages/core/src/tools/`, разделённые по доменам: read, create, modify, structure, variables, vector, analyze. У каждого инструмента типизированные параметры и функция `execute(figma, args)`. Адаптеры конвертируют их для: -- **ИИ-чат** — схемы valibot, подключение к OpenRouter +- **ИИ-чат** — схемы valibot, мультипровайдер (Anthropic, OpenAI, Google AI, OpenRouter, совместимые эндпоинты) - **MCP-сервер** — схемы zod, транспорты stdio + HTTP - **CLI** — доступно через команду `eval` -87 основных инструментов + 3 инструмента управления файлами MCP = 90 всего. +90+ основных инструментов + 3 инструмента управления файлами MCP. Включает XPath-запросы (`query_nodes`), инспекцию JSX (`get_jsx`, `diff_jsx`), семантическое описание (`describe`) и визуальную проверку (`export_image` возвращает изображения модели). ### Отмена/Повтор @@ -106,10 +108,6 @@ Headless CLI уже поддерживает `analyze colors/typography/spacing/ Переходы между фреймами, триггеры взаимодействия (клик, наведение, перетаскивание), управление оверлеями и полноэкранный режим предпросмотра. -### Макет CSS Grid - -CSS Grid поддерживается через [форк Yoga](https://github.com/open-pencil/yoga/tree/grid). Выберите фрейм, нажмите на иконку сетки для переключения с flex на grid. Настройте колонки и строки (fr, фиксированные px, auto), зазоры между ними и отступы с каждой стороны. - ### Подпись кода для Windows Бинарные файлы macOS подписаны и нотаризованы с версии v0.6.0. Подпись Windows Authenticode через Azure Code Signing планируется для устранения предупреждения SmartScreen. diff --git a/packages/docs/ru/guide/features.md b/packages/docs/ru/guide/features.md index 2bb3cda3c..9c3a407c8 100644 --- a/packages/docs/ru/guide/features.md +++ b/packages/docs/ru/guide/features.md @@ -65,13 +65,15 @@ CLI: `open-pencil export design.fig -f jsx --style tailwind` ## Чат с ИИ -Нажмите ⌘J, чтобы открыть ИИ-ассистента. 87 инструментов для создания фигур, стилизации, управления макетом, работы с компонентами и переменными, булевых операций, анализа дизайн-токенов и экспорта ассетов. Используйте свой API-ключ OpenRouter. +Нажмите ⌘J, чтобы открыть ИИ-ассистента. 90+ инструментов для создания фигур, стилизации, управления макетом, работы с компонентами и переменными, булевых операций, анализа дизайн-токенов и экспорта ассетов. Подключайте Anthropic, OpenAI, Google AI, OpenRouter или совместимый эндпоинт. -Вызовы инструментов отображаются как сворачиваемые записи таймлайна. Выбор модели: Claude, Gemini, GPT, DeepSeek и другие. +Вызовы инструментов отображаются как сворачиваемые записи. Визуальная проверка — ассистент рендерит свою работу и сравнивает с запросом. Полная поддержка отмены для всех операций ИИ. + +См. [Чат с ИИ](/programmable/ai-chat) для настройки и информации о провайдерах. ## MCP-сервер -Подключайте Claude Code, Cursor, Windsurf или любой MCP-клиент для чтения и записи файлов `.fig` в headless-режиме. 90 инструментов (87 основных + 3 для управления файлами). Два транспорта: stdio и HTTP. +Подключайте Claude Code, Cursor, Windsurf или любой MCP-клиент для чтения и записи файлов `.fig` в headless-режиме. 90+ инструментов. Два транспорта: stdio и HTTP. ```sh bun add -g @open-pencil/mcp diff --git a/packages/docs/ru/guide/figma-comparison.md b/packages/docs/ru/guide/figma-comparison.md index 401799b47..27878adfe 100644 --- a/packages/docs/ru/guide/figma-comparison.md +++ b/packages/docs/ru/guide/figma-comparison.md @@ -28,7 +28,7 @@ | Пользовательские миниатюры файлов | 🔲 | Миниатюра генерируется при экспорте, но без выбора пользовательской | | Настройки шага сдвига | 🔲 | По умолчанию 1px/10px; Figma позволяет настроить малый/большой шаг | | Меню приложения (режим браузера) | ✅ | Меню Файл, Редактирование, Вид, Объект, Текст, Упорядочить; Tauri использует нативные меню | -| ИИ-инструменты | 🟡 | 90 инструментов через OpenRouter + MCP-сервер; нет генерации изображений ИИ и ИИ-поиска | +| ИИ-инструменты | 🟡 | 90+ инструментов через Anthropic, OpenAI, Google AI, OpenRouter + MCP-сервер; нет генерации изображений ИИ и ИИ-поиска | ## Слои и фигуры diff --git a/packages/docs/ru/guide/tech-stack.md b/packages/docs/ru/guide/tech-stack.md index 941bd144c..eaa384be6 100644 --- a/packages/docs/ru/guide/tech-stack.md +++ b/packages/docs/ru/guide/tech-stack.md @@ -12,7 +12,11 @@ | **Формат файлов** | Kiwi binary + Zstd | Собственный формат Figma — компактный, быстрый парсинг, совместимость с .fig | | **Совместная работа** | Trystero + Yjs | P2P WebRTC через MQTT, CRDT-синхронизация, сохранение в y-indexeddb | | **Цвет** | culori | Конвертация цветовых пространств (HSV, RGB, hex) | -| **ИИ/MCP** | MCP SDK + Hono | 87 инструментов для ИИ-кодинга, транспорты stdio + HTTP | +| **ИИ/MCP** | MCP SDK + Hono | 90+ инструментов для ИИ-кодинга, транспорты stdio + HTTP | +| **JSX-трансформ** | Sucrase | 201 КБ JSX → JS, синхронный, работает в браузере | +| **События** | nanoevents | 108 байт, типизированный эмиттер событий для мутаций SceneGraph | +| **JSX-трансформ** | Sucrase | 201 КБ JSX → JS, синхронный, работает в браузере | +| **События** | nanoevents | 108 байт, типизированный эмиттер событий для мутаций SceneGraph | | **Десктоп** | Tauri v2 | ~5 МБ нативное приложение (против ~100 МБ у Electron), бэкенд на Rust | | **Сборка** | Vite 7 | Быстрый HMR, нативные ES-модули | | **Тестирование** | Playwright + bun:test | Визуальная регрессия (E2E) + быстрые модульные тесты | @@ -26,7 +30,9 @@ { "canvaskit-wasm": "^0.40.0", "vue": "^3.5.29", - "yoga-layout": "^3.2.1", + "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2", + "nanoevents": "^9.1.0", + "sucrase": "^3.35.1", "reka-ui": "^2.8.2", "tailwindcss": "^4.2.1", "culori": "^4.0.2", @@ -60,4 +66,4 @@ Yoga поддерживается Meta, проверен на миллиарда | Технология | Назначение | Этап | |-----------|---------|-------| -| CSS Grid в Yoga | Макет на основе сетки | ✅ Поддерживается через [форк Yoga](https://github.com/open-pencil/yoga/tree/grid) | +| CSS Grid в Yoga | Макет на основе сетки | ✅ Включено через [форк Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) | diff --git a/packages/docs/ru/programmable/ai-chat.md b/packages/docs/ru/programmable/ai-chat.md index 026481385..ec3438823 100644 --- a/packages/docs/ru/programmable/ai-chat.md +++ b/packages/docs/ru/programmable/ai-chat.md @@ -1,47 +1,64 @@ --- -title: ИИ-чат -description: Встроенный ИИ-ассистент с 87 инструментами для создания и модификации дизайна. +title: Чат с ИИ +description: Встроенный ИИ-ассистент с более чем 90 инструментами для создания и редактирования дизайнов. --- -# ИИ-чат +# Чат с ИИ -Нажмите ⌘J (Ctrl + J), чтобы открыть ИИ-ассистент. Опишите, что вам нужно — он создаёт фигуры, настраивает стили, управляет лейаутом, работает с компонентами и анализирует ваш дизайн. +Нажмите ⌘J (Ctrl + J), чтобы открыть ИИ-ассистента. Опишите, что вам нужно — он создаёт фигуры, задаёт стили, управляет раскладкой, работает с компонентами и анализирует дизайн. ## Настройка -1. Откройте панель ИИ-чата (⌘J) -2. Нажмите значок настроек -3. Введите ваш API-ключ OpenRouter -4. Выберите модель (Claude, GPT-4, Gemini и др.) +1. Откройте панель чата (⌘J) +2. Нажмите на значок настроек +3. Выберите провайдера и введите ключ API +4. Выберите модель -Без бэкенда, без подписки — ваш ключ обращается напрямую к OpenRouter. +### Поддерживаемые провайдеры + +| Провайдер | Модели | Настройка | +|-----------|--------|-----------| +| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek и другие | Ключ API с [openrouter.ai](https://openrouter.ai) | +| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus и др. | Ключ API с [console.anthropic.com](https://console.anthropic.com) | +| **OpenAI** | GPT-4o, GPT-4 и др. | Ключ API с [platform.openai.com](https://platform.openai.com) | +| **Google AI** | Gemini 2.0, Gemini 1.5 и др. | Ключ API с [aistudio.google.dev](https://aistudio.google.dev) | +| **Совместимый с OpenAI** | Любой эндпоинт с форматом API OpenAI | Собственный базовый URL + ключ. Поддержка переключения между API Completions и Responses. | +| **Совместимый с Anthropic** | Любой эндпоинт с форматом API Anthropic | Собственный базовый URL + ключ | + +Без сервера, без подписки — ключ обращается напрямую к провайдеру. ## Возможности -Ассистент имеет 87 инструментов в следующих категориях: +Ассистент имеет более 90 инструментов в этих категориях: -- **Создание** — фреймы, фигуры, текст, компоненты, страницы. Рендер JSX для сложных макетов. -- **Стилизация** — заливки, обводки, эффекты, прозрачность, скругление углов, режимы наложения. -- **Лейаут** — автолейаут, выравнивание, отступы, размеры. +- **Создание** — фреймы, фигуры, текст, компоненты, страницы. Рендеринг JSX для сложных раскладок. +- **Стили** — заливки, обводки, эффекты, непрозрачность, скругление углов, режимы наложения. +- **Раскладка** — авто-раскладка, сетка, выравнивание, отступы, размеры. - **Компоненты** — создание компонентов, экземпляров, наборов компонентов. Управление переопределениями. - **Переменные** — создание и редактирование переменных, коллекций, режимов. Привязка к заливкам. -- **Запросы** — поиск узлов, чтение свойств, список страниц, шрифтов, выделение. -- **Анализ** — цветовая палитра, аудит типографики, проверка консистентности отступов, обнаружение кластеров. -- **Экспорт** — PNG, SVG, JSX с классами Tailwind. +- **Запросы** — поиск узлов, XPath-селекторы, чтение свойств, список страниц, шрифтов, выделения. +- **Инспекция** — `get_jsx` для просмотра JSX, `diff_jsx` для структурных сравнений, `describe` для определения семантической роли и проблем дизайна. +- **Анализ** — цветовая палитра, аудит типографики, согласованность отступов, обнаружение повторяющихся паттернов. +- **Экспорт** — PNG, SVG, JSX с классами Tailwind. Визуальная проверка через `export_image`. - **Вектор** — булевы операции, работа с контурами. +## Визуальная проверка + +Ассистент может визуально проверять результат своей работы. После создания или изменения дизайна он использует `export_image` для захвата изображения и сравнения результата с исходным запросом. + ## Примеры запросов - «Создай карточку с заголовком, описанием и синей кнопкой» -- «Сделай одинаковое скругление углов для всех кнопок на этой странице» +- «Установи одинаковое скругление углов для всех кнопок на этой странице» - «Какие шрифты используются в этом файле?» -- «Измени фон выделенного фрейма на градиент от синего к фиолетовому» -- «Экспортируй выделенный фрейм как SVG» -- «Найди все текстовые узлы с размером шрифта меньше 12» +- «Измени фон выбранного фрейма на градиент от синего к фиолетовому» +- «Экспортируй выбранный фрейм в SVG» +- «Покажи JSX этого фрейма» ## Советы - Выделите узлы перед запросом — ассистент знает, что выделено. -- Указывайте конкретные цвета, размеры и позиции для точных результатов. -- Ассистент может модифицировать несколько узлов в одном сообщении. -- Используйте «Отменить» в редакторе, если результат вам не подходит. +- Указывайте точные цвета, размеры и позиции для точных результатов. +- Ассистент может изменять несколько узлов за одно сообщение. +- Используйте «отменить» в редакторе — операции ИИ поддерживают полную отмену. +- Раскладка автоматически пересчитывается после каждого выполнения инструмента. diff --git a/packages/docs/ru/reference/keyboard-shortcuts.md b/packages/docs/ru/reference/keyboard-shortcuts.md index 426dab83a..35286c3a6 100644 --- a/packages/docs/ru/reference/keyboard-shortcuts.md +++ b/packages/docs/ru/reference/keyboard-shortcuts.md @@ -68,8 +68,10 @@ | ⌘= | Увеличить | ✅ | | ⌘- | Уменьшить | ✅ | | ⌘0 | Масштаб 100% | ✅ | -| ⌘1 | Масштаб по содержимому | 🔲 | -| ⌘2 | Масштаб по выделению | 🔲 | +| ⌘1 | Масштаб по содержимому | ✅ | +| ⌘2 | Масштаб по выделению | ✅ | +| ⇧1 | Масштаб по содержимому (альт.) | ✅ | +| ⇧2 | Масштаб по выделению (альт.) | ✅ | | ⌘J | AI-чат | ✅ | ## Объект diff --git a/packages/docs/ru/user-guide/auto-layout.md b/packages/docs/ru/user-guide/auto-layout.md index 492750799..11cf4a4bb 100644 --- a/packages/docs/ru/user-guide/auto-layout.md +++ b/packages/docs/ru/user-guide/auto-layout.md @@ -1,11 +1,11 @@ --- title: Авто-раскладка -description: Авто-раскладка на основе flexbox в OpenPencil — направление, отступы, выравнивание и размеры дочерних элементов. +description: Flex- и grid-раскладка в OpenPencil — направление, отступы, выравнивание, размеры и CSS Grid дорожки. --- # Авто-раскладка -Авто-раскладка автоматически позиционирует дочерние элементы внутри фрейма по правилам flexbox. Она управляет направлением, отступами, выравниванием и адаптивными размерами. +Авто-раскладка автоматически позиционирует дочерние элементы внутри фрейма. Поддерживает два режима: **flex** (горизонтальный/вертикальный поток) и **grid** (строки и столбцы с настройкой дорожек). ## Включение авто-раскладки @@ -74,10 +74,39 @@ description: Авто-раскладка на основе flexbox в OpenPencil |----------|-----|-----------------| | Переключить авто-раскладку | ⇧A | Shift + A | +## CSS Grid + +Grid-раскладка организует дочерние элементы в строки и столбцы с явным размером дорожек. + +### Включение сетки + +Выберите фрейм с включённой авто-раскладкой и нажмите на значок сетки в панели инструментов раскладки, чтобы переключиться с flex на grid. + +### Размеры дорожек + +Определите дорожки столбцов и строк тремя способами: + +- **fr** — дробная единица, делит доступное пространство пропорционально +- **px** — фиксированный размер в пикселях +- **auto** — подстраивается под содержимое + +### Промежутки сетки + +Задайте раздельные горизонтальные (между столбцами) и вертикальные (между строками) промежутки. + +### Позиционирование дочерних элементов + +Элементы размещаются в ячейках сетки автоматически в порядке строк. Вы можете переопределить размещение значениями начала столбца/строки и охвата в свойствах раскладки дочернего элемента. + +### Экспорт JSX и Tailwind + +Grid-раскладки экспортируются как JSX с классами Tailwind: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`. + ## Советы - Авто-раскладка пересчитывается сразу после создания, поэтому границы выделения обновляются немедленно. - Вкладывайте фреймы с авто-раскладкой для создания сложных адаптивных макетов (например, вертикальный фрейм, содержащий горизонтальные строки). - Используйте размер «Заполнить», чтобы элемент занял оставшееся пространство, аналогично flex-grow: 1 в CSS. +- Используйте grid для панелей управления, галерей и форм — всего, что имеет двумерную структуру. - См. [Рисование фигур](./drawing-shapes) для создания фреймов, к которым применяется авто-раскладка. - См. [Компоненты](./components) для использования авто-раскладки внутри переиспользуемых компонентов. diff --git a/packages/docs/user-guide/auto-layout.md b/packages/docs/user-guide/auto-layout.md index f7f7267fc..7cd34519a 100644 --- a/packages/docs/user-guide/auto-layout.md +++ b/packages/docs/user-guide/auto-layout.md @@ -1,11 +1,11 @@ --- title: Auto Layout -description: Flexbox-based auto layout in OpenPencil — direction, gap, padding, alignment, and child sizing. +description: Flex and grid layout in OpenPencil — direction, gap, padding, alignment, child sizing, and CSS Grid tracks. --- # Auto Layout -Auto layout positions children automatically within a frame using flexbox rules. It handles direction, spacing, alignment, and responsive sizing. +Auto layout positions children automatically within a frame. It supports two modes: **flex** (horizontal/vertical flow) and **grid** (rows and columns with track sizing). ## Enabling Auto Layout - Select a frame and press ⇧A (Shift + A) to toggle auto layout on or off @@ -73,10 +73,41 @@ When an auto-layout frame is selected, the Layout section in the properties pane |--------|-----|-----------------| | Toggle auto layout | ⇧A | Shift + A | +## CSS Grid + +Grid layout arranges children in rows and columns with explicit track sizing. + +### Enabling Grid + +Select a frame with auto layout enabled and click the grid icon in the layout toolbar to switch from flex to grid. + +### Track Sizing + +Define column and row tracks with three sizing modes: + +- **fr** — fractional unit, divides available space proportionally +- **px** — fixed pixel size +- **auto** — sizes to fit content + +Example: three columns of `1fr 200px 1fr` creates a layout with a fixed center column and flexible sides. + +### Grid Gaps + +Set separate horizontal (column) and vertical (row) gaps between cells. + +### Child Positioning + +Children are placed into grid cells automatically in row order. You can override placement with column/row start and span values in the child's layout properties. + +### JSX and Tailwind Export + +Grid layouts export to JSX with Tailwind classes: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`. + ## Tips - Auto layout recomputes immediately after creation, so the selection bounds update right away. - Nest auto-layout frames for complex responsive layouts (e.g., a vertical frame containing horizontal rows). - Use "Fill" sizing to make a child take up remaining space, like a flex-grow: 1 in CSS. +- Use grid for dashboard layouts, galleries, and forms — anything with a two-dimensional structure. - See [Drawing Shapes](./drawing-shapes) for creating the frames that auto layout applies to. - See [Components](./components) for using auto layout within reusable components.