@dannote/figma-use 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -7,6 +7,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.6.2] - 2026-01-19
+
+### Added
+
+- `bun run format` — format code with oxfmt
+- `bun run lint` — lint code with oxlint
+
+## [0.6.1] - 2026-01-19
+
+### Added
+
+- **`diff` commands** (experimental) — incremental updates via unified diff patches
+  - `diff create --from <id> --to <id>` — compare two node trees and generate patch
+  - `diff apply` — apply a patch to Figma nodes (validates old values!)
+  - `diff show` — show diff between current state and new properties
+  ```bash
+  # Compare two frames (e.g., before/after, A/B variants)
+  figma-use diff create --from 123:456 --to 789:012
+  
+  # Apply patch (validates old values match)
+  figma-use diff apply --stdin < patch.diff
+  
+  # Dry run
+  figma-use diff apply --stdin --dry-run < patch.diff
+  ```
+- Uses `diff` library for unified diff parsing and validation
+
+### Fixed
+
+- `--timeout` now applies to single commands (e.g., `eval`) via proxy `/command`
+- CLI now works after global install ([#1](https://github.com/dannote/figma-use/issues/1))
+- Move `kiwi-schema` to devDependencies (already bundled into dist)
+
 ## [0.6.0] - 2026-01-18
 
 ### Added
@@ -214,7 +247,7 @@ the same batch. See `component-set.tsx` for detailed explanation.
   - From stdin: `echo '<Frame style={{...}} />' | figma-use render --stdin`
   - With props: `--props '{"title": "Hello"}'`
   - Into parent: `--parent "1:23"`
-  - Dry run: `--dryRun` outputs NodeChanges JSON
+  - Dry run: `--dry-run` outputs NodeChanges JSON
 - **Multiplayer WebSocket connection pooling** in proxy
   - First render: ~4s (establishes connection)
   - Subsequent renders: ~0.4s (10x faster!)

package/README.md

@@ -12,11 +12,24 @@ No JSON schemas, no MCP protocol overhead — just JSX that any LLM can write.
 
 📄 **Includes [SKILL.md](./SKILL.md)** — drop-in reference for Claude Code and other AI agents.
 
+## Demo
+
+<table>
+<tr>
+<td width="50%">
 <a href="https://youtu.be/9eSYVZRle7o">
-  <img src="https://img.youtube.com/vi/9eSYVZRle7o/maxresdefault.jpg" alt="Watch demo on YouTube" width="100%">
+<img src="https://img.youtube.com/vi/9eSYVZRle7o/maxresdefault.jpg" alt="Button components demo" width="100%">
 </a>
-
-**▶️ [Watch the demo](https://youtu.be/9eSYVZRle7o)** — AI builds a button component set in Figma in seconds.
+<p align="center"><b>▶️ Button components</b></p>
+</td>
+<td width="50%">
+<a href="https://youtu.be/efJWp2Drzb4">
+<img src="https://img.youtube.com/vi/efJWp2Drzb4/maxresdefault.jpg" alt="Calendar demo" width="100%">
+</a>
+<p align="center"><b>▶️ Tailwind UI calendar</b></p>
+</td>
+</tr>
+</table>
 
 ## Why CLI over MCP?
 
@@ -291,6 +304,24 @@ figma-use me                                 # Current user info
 figma-use file info                          # File key and name
 ```
 
+### Diff (Experimental)
+
+Compare two frames and generate a unified diff patch:
+
+```bash
+# Compare original vs modified version
+figma-use diff create --from 123:456 --to 789:012
+```
+
+Apply patch with validation (fails if current state doesn't match expected):
+
+```bash
+figma-use diff apply patch.diff           # Apply from file
+figma-use diff apply --stdin < patch.diff # Apply from stdin
+figma-use diff apply patch.diff --dry-run # Preview changes
+figma-use diff apply patch.diff --force   # Skip validation
+```
+
 ### Escape Hatch
 
 ```bash

package/SKILL.md

@@ -34,6 +34,78 @@ figma-use plugin install
 
 ---
 
+## ⚠️ Incremental Updates via Diff (Experimental)
+
+**After initial render, NEVER re-render the full JSX tree.**
+
+Use unified diff patches to apply targeted changes with validation:
+
+> ⚠️ **Experimental:** `diff` commands are new and may change.
+
+### Compare two frames and generate patch
+```bash
+# Compare original vs modified version
+figma-use diff create --from 123:456 --to 789:012
+```
+
+Output (unified diff format):
+```diff
+--- /Card/Header #123:457
++++ /Card/Header #789:013
+@@ -1,5 +1,5 @@
+ type: FRAME
+ size: 200 50
+ pos: 0 0
+-fill: #FFFFFF
++fill: #F0F0F0
+-opacity: 0.8
++opacity: 1
+```
+
+### Apply patch (validates old values!)
+```bash
+# Dry run — preview changes
+figma-use diff apply patch.diff --dry-run
+
+# Apply changes (fails if old values don't match)
+figma-use diff apply patch.diff
+
+# Force apply (skip validation)
+figma-use diff apply patch.diff --force
+
+# From stdin
+cat patch.diff | figma-use diff apply --stdin
+```
+
+### Workflow: Iterative design with critique
+
+1. **Render initial design:**
+   ```bash
+   cat design.jsx | figma-use render --stdin --json > nodes.json
+   ```
+
+2. **Get critique, then generate patch:**
+   ```bash
+   # Clone and modify (or compare to another frame)
+   figma-use diff create --from <original> --to <modified>
+   ```
+
+3. **Apply patch to original:**
+   ```bash
+   figma-use diff apply --stdin < changes.diff
+   ```
+
+### Direct commands (for simple changes)
+```bash
+figma-use set fill <id> "#FF0000"
+figma-use set opacity <id> 0.5
+figma-use node resize <id> --width 300 --height 200
+figma-use node move <id> --x 100 --y 200
+figma-use node delete <id>
+```
+
+---
+
 ## JSX Rendering (Fastest Way)
 
 Use `render --stdin` with **pure JSX only**. No variables, no functions, no imports — just JSX tags:

package/bin/figma-use.js

@@ -4,10 +4,7 @@ import { fileURLToPath } from 'url'
 import { dirname, join } from 'path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
-
-// Use source files directly (Bun handles TypeScript)
-// This ensures defineComponent registry is shared with imported .figma.tsx files
-const cliPath = join(__dirname, '..', 'packages', 'cli', 'src', 'index.ts')
+const cliPath = join(__dirname, '..', 'dist', 'cli', 'index.js')
 
 const child = spawn('bun', ['run', cliPath, ...process.argv.slice(2)], { stdio: 'inherit' })
 child.on('exit', (code) => process.exit(code || 0))