21 Commits

Author SHA1 Message Date
Marcos Paulo cac0276c51 chore(release): 0.7.1
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-24 19:41:38 -03:00
Marcos Paulo c5bd4c650d fix(ui): Enter, Escape and clicking away end a rename again
The project, library asset and version rename fields asked for focus every
frame before checking `lost_focus()`. In egui 0.36 `lost_focus()` reads the
focus as it is at the call, so taking it back first hid Enter, Escape and a
click elsewhere: the field could not be left. Focus is now taken back only
while the edit goes on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-24 19:12:05 -03:00
Marcos Paulo 1b795fa971 feat: 0.7.0 chat images, web research, image generation, plugins, fewer tokens
Images: paste from the clipboard into the chat, thumbnails and a lightbox for
what is sent, image-only messages, attachments sent at 1568px with the
original kept for zoom_image.

Brief and finish: ask_user question cards (swatches, reference tiles, the
recommended answer), chat rules for a brief, design system first, density,
short reports and next steps.

Research: the composer's Web chip, fetch_reference_images (public addresses
only; icons, logos and backdrops dropped), a References gallery, and a Haiku
researcher sub-agent on Claude Code.

Image generation (opt-in): Codex, Google Flow (gf) or a custom command.

Plugins page: Avataaars, DiceBear, Iconify, Lorem Picsum, Flags and QR codes
through <x-plugin>; SVG import draws masked groups as images.

Tokens: lean Claude Code sessions, deferred tool schemas and context editing
on the API, a fresh session with a recap past 120k or on demand, per-turn and
chat totals, a 1M context meter, a turn budget, model and effort pickers.

Also: page switcher in Chat, no flicker while steps run, desktop target size
in lint, the installer keeps papercraft-mcp current.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-24 19:04:55 -03:00
Marcos Paulo 4a8bd9a35b docs(skills): lessons from the Interview redesign: online-only CLI, one call at a time, multi-agent sections, cross-page instances, annotation checks, QA pitfalls
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-24 02:08:37 -03:00
Marcos Paulo 4a527dc70b docs(specs): interview cleanup and redesign reports, chat-canvas spec, annotation fixes
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-24 01:54:59 -03:00
Marcos Paulo 97717beb6d docs: chat canvas tools, annotations, agent tools, cross-page components
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-24 01:54:58 -03:00
Marcos Paulo 872b693373 feat: lazy page loading, annotation layout, chat canvas tools
- Lazy project loading: the page in view first, the rest in the background;
  fix the endless repaint and memoise layer heights.
- Annotations: placement off screens, straight routing inside the target's
  screen, zoom-stable lines, badges below 60% zoom, Tidy, custom templates
  (upsert/delete_annotation_template).
- Chat: design-system digest each turn, Actions menu on a selection (fix lint,
  bind to tokens, use components, rename layers, agent prompts), Pick / area
  chips with crops, ⌥-click, ⌘K Ask, live agent outlines and counts, one run
  per MCP client with per-run revert, Stop shown as Stopped.
- MCP: set_viewport, viewport in get_basic_info/get_selection, screenshots
  with annotations, find_nodes substring search, get_tree_summary fullText,
  annotate tidy returns tidied count, not-an-instance lint.
- Fixes: write_html links cross-page components instead of copying them;
  instance roots keep their own layout when synced or swapped; CLI saves
  screenshots itself (the app writing to a removable volume froze it behind a
  macOS prompt), offline write lock, version check, --online.
- tools/install-local.sh installs the CLI and signs with a stable identity
  when present; Dockerfile adds the D-Bus packages the relay needs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-24 01:54:55 -03:00
Marcos Paulo dcecdc31b5 docs: 0.6.1 checked on native x86_64 Linux with an RTX 3090
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-23 01:07:14 -03:00
Marcos Paulo 3212e3f754 docs: 0.6.1 live UI pass with the screen unlocked
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-23 01:03:21 -03:00
Marcos Paulo d6695de462 docs: 0.6.1 Linux text check on native arm64 (clean)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-23 00:51:51 -03:00
Marcos Paulo c75efc3e7b docs: 0.6.1 Linux GUI check under Xvfb
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-22 09:33:01 -03:00
Marcos Paulo 58ad0de0db docs: 0.6.1 live-app check screenshots
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-22 09:29:04 -03:00
Marcos Paulo 238249309f chore: release 0.6.1
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-22 05:37:26 -03:00
Marcos Paulo 35dc8aed8f docs: agents and annotations guides, specs, mock-ups, 0.6.1 checks
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-22 05:37:20 -03:00
Marcos Paulo 73353dd4ca feat: any agent via ACP, annotations with templates, chat fixes
Chat: agents are found on the login-shell PATH, so apps launched from
the Dock see claude, codex and Homebrew CLIs. A generic Agent Client
Protocol backend runs OpenCode, Gemini CLI, Cursor, Pi (pi-acp) and
others from a data registry, plus custom agents; papercraft tools are
auto-approved only when announced and not destructive. New agent panel
and Settings > Chat layout, sign-in card, several @ selections, no
install instructions. Fixes Send silently doing nothing when the CLI
path was set in Settings.

Annotations: numbered notes with leader lines that explain a design.
Categories drive the look; templates (project default, per-page) choose
which kinds are used. Annotate tool (N), side view, Customize, inspector
section, Annotate with AI, view modes (Cmd+Shift+A). MCP: annotate
(batched), get/update/delete, get/set_annotation_template; notes appear
in get_design_spec and get_jsx and in agent-run review and revert.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-22 05:37:20 -03:00
Marcos Paulo 33a0e265b8 chore: release 0.6.0
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-21 22:43:18 -03:00
Marcos Paulo 45f197250b docs: Chat mode guide, spec, mock-ups and end-to-end screenshots
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-21 22:43:11 -03:00
Marcos Paulo 13bc2d582e feat: Chat mode with Claude Code, Codex and generic API endpoints
A Design | Chat layout (Cmd+J): a chat column next to the live canvas.
Agents run through PaperCraft's own tools, so agent runs, undo, review
and revert work as for any MCP client. The thread shows streamed text,
reasoning, tool cards grouped into steps, the agent's plan, approvals
for destructive tools, checkpoints with Restore to here, run cards and
usage. Chats are saved in the project under chats/.

Backends: Claude Code (claude -p stream-json) and Codex (codex exec
--json) with the app's MCP server, using their own logins; or any API
endpoint in Anthropic Messages or OpenAI Chat Completions format with a
key kept in the OS keychain. Settings > Chat configures them.

Also: the offline CLI no longer saves a camera fitted to a fake window,
and top-level shapes without a position go to the next free spot.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-21 22:43:11 -03:00
Marcos Paulo 92c63b0a46 chore: release 0.5.0
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-21 17:47:43 -03:00
Marcos Paulo dcbc213d1f docs: README, design-system and agent docs, specs, skills for 0.5
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-21 17:47:24 -03:00
Marcos Paulo 30dba88e1c feat: variable collections, shared libraries, assets and offline CLI
Variables move to a project-level design.json: collections with their
own modes, slash groups, color/number/string/boolean types and aliases.
Pages keep a derived cache, every writer goes through one path, and a
change reaches every page in one undo step per page. Strokes, text
color, size, gap, padding, radius, font size, line height, opacity and
visibility can bind to variables. Projects migrate to version 2.

Components work across pages, and any file can publish itself as a
library that other files enable, update after review, or disable.

New Variables and Libraries modals, an Assets view grouped by name
prefix, variable pickers in the inspector, and a slimmer Design tab.

papercraft-cli runs tools in-process when the app is closed, with a
`shell` command for interactive sessions and scripts.

Also centres the sidebar footer and title bar text on their icons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-21 17:47:23 -03:00
725 changed files with 39531 additions and 1831 deletions
Generated
+662 -6
View File
@@ -33,6 +33,17 @@ version = "2.0.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
[[package]]
name = "aes"
version = "0.8.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b169f7a6d4742236a0a00c541b845991d0ac43e546831af1249753ab4c3aa3a0"
dependencies = [
"cfg-if",
"cipher",
"cpufeatures 0.2.17",
]
[[package]]
name = "ahash"
version = "0.8.12"
@@ -192,6 +203,112 @@ dependencies = [
"libloading",
]
[[package]]
name = "async-broadcast"
version = "0.7.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "435a87a52755b8f27fcf321ac4f04b2802e337c8c4872923137471ec39c37532"
dependencies = [
"event-listener",
"event-listener-strategy",
"futures-core",
"pin-project-lite",
]
[[package]]
name = "async-channel"
version = "2.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "924ed96dd52d1b75e9c1a3e6275715fd320f5f9439fb5a4a11fa51f4221158d2"
dependencies = [
"concurrent-queue",
"event-listener-strategy",
"futures-core",
"pin-project-lite",
]
[[package]]
name = "async-io"
version = "2.6.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "456b8a8feb6f42d237746d4b3e9a178494627745c3c56c6ea55d92ba50d026fc"
dependencies = [
"autocfg",
"cfg-if",
"concurrent-queue",
"futures-io",
"futures-lite",
"parking",
"polling",
"rustix 1.1.5",
"slab",
"windows-sys 0.61.2",
]
[[package]]
name = "async-lock"
version = "3.4.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "290f7f2596bd5b78a9fec8088ccd89180d7f9f55b94b0576823bbbdc72ee8311"
dependencies = [
"event-listener",
"event-listener-strategy",
"pin-project-lite",
]
[[package]]
name = "async-process"
version = "2.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "fc50921ec0055cdd8a16de48773bfeec5c972598674347252c0399676be7da75"
dependencies = [
"async-channel",
"async-io",
"async-lock",
"async-signal",
"async-task",
"blocking",
"cfg-if",
"event-listener",
"futures-lite",
"rustix 1.1.5",
]
[[package]]
name = "async-recursion"
version = "1.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4f8abc12baad266b1c8cec146854c195b5864b4221d4b2ca7296a7ae82d9e451"
dependencies = [
"proc-macro2",
"quote",
"syn 3.0.7",
]
[[package]]
name = "async-signal"
version = "0.2.14"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "52b5aaafa020cf5053a01f2a60e8ff5dccf550f0f77ec54a4e47285ac2bab485"
dependencies = [
"async-io",
"async-lock",
"atomic-waker",
"cfg-if",
"futures-core",
"futures-io",
"rustix 1.1.5",
"signal-hook-registry",
"slab",
"windows-sys 0.61.2",
]
[[package]]
name = "async-task"
version = "4.7.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8b75356056920673b02621b35afd0f7dda9306d03c79a30f5c56c44cf256e3de"
[[package]]
name = "async-trait"
version = "0.1.92"
@@ -316,6 +433,15 @@ dependencies = [
"generic-array",
]
[[package]]
name = "block-padding"
version = "0.3.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a8894febbff9f758034a5b8e12d87918f56dfc64a8e1fe757d65e29041538d93"
dependencies = [
"generic-array",
]
[[package]]
name = "block2"
version = "0.5.1"
@@ -334,6 +460,19 @@ dependencies = [
"objc2 0.6.5",
]
[[package]]
name = "blocking"
version = "1.7.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a70e4329df6cb94385eed412ec92375c3cdd8a6e502493d1229b6414e4036dfa"
dependencies = [
"async-channel",
"async-task",
"futures-io",
"futures-lite",
"piper",
]
[[package]]
name = "bumpalo"
version = "3.20.3"
@@ -360,6 +499,12 @@ dependencies = [
"syn 3.0.7",
]
[[package]]
name = "byteorder"
version = "1.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
[[package]]
name = "byteorder-lite"
version = "0.1.0"
@@ -422,6 +567,15 @@ dependencies = [
"wayland-client",
]
[[package]]
name = "cbc"
version = "0.1.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "26b52a9543ae338f279b96b0b9fed9c8093744685043739079ce85cd58f289a6"
dependencies = [
"cipher",
]
[[package]]
name = "cc"
version = "1.7.0"
@@ -469,6 +623,16 @@ dependencies = [
"windows-link",
]
[[package]]
name = "cipher"
version = "0.4.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "773f3b9af64447d2ce9850330c473515014aa235e6a783b02db81ff39e4a3dad"
dependencies = [
"crypto-common",
"inout",
]
[[package]]
name = "clipboard-win"
version = "5.4.1"
@@ -683,6 +847,35 @@ version = "0.3.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "be1e0bca6c3637f992fc1cc7cbc52a78c1ef6db076dbf1059c4323d6a2048376"
[[package]]
name = "dbus"
version = "0.9.12"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3ab69f03cc8c4340c9c8e315114e1658e6775a9b16a04357973aa21cec22b32e"
dependencies = [
"libc",
"libdbus-sys",
"windows-sys 0.61.2",
]
[[package]]
name = "dbus-secret-service"
version = "4.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "708b509edf7889e53d7efb0ffadd994cc6c2345ccb62f55cfd6b0682165e4fa6"
dependencies = [
"aes",
"block-padding",
"cbc",
"dbus",
"fastrand",
"hkdf",
"num",
"once_cell",
"sha2",
"zeroize",
]
[[package]]
name = "defmt"
version = "1.1.1"
@@ -722,6 +915,7 @@ checksum = "9ed9a281f7bc9b7576e61468ba615a66a5c8cfdff42420a70aa82701a3b1e292"
dependencies = [
"block-buffer",
"crypto-common",
"subtle",
]
[[package]]
@@ -894,6 +1088,33 @@ dependencies = [
"bytemuck",
]
[[package]]
name = "endi"
version = "1.1.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "66b7e2430c6dff6a955451e2cfc438f09cea1965a9d6f87f7e3b90decc014099"
[[package]]
name = "enumflags2"
version = "0.7.12"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1027f7680c853e056ebcec683615fb6fbbc07dbaa13b4d5d9442b146ded4ecef"
dependencies = [
"enumflags2_derive",
"serde",
]
[[package]]
name = "enumflags2_derive"
version = "0.7.12"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "67c78a4d8fdf9953a5c9d458f9efe940fd97a0cab0941c075a813ac594733827"
dependencies = [
"proc-macro2",
"quote",
"syn 2.0.119",
]
[[package]]
name = "env_filter"
version = "2.0.0"
@@ -979,6 +1200,26 @@ dependencies = [
"num-traits",
]
[[package]]
name = "event-listener"
version = "5.4.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5a23add41df1562121a9393cb065eab5146a1242410f23a644851e90cfd669d2"
dependencies = [
"parking",
"pin-project-lite",
]
[[package]]
name = "event-listener-strategy"
version = "0.5.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8be9f3dfaaffdae2972880079a491a1a8bb7cbed0b8dd7a347f668b4150a3b93"
dependencies = [
"event-listener",
"pin-project-lite",
]
[[package]]
name = "fastrand"
version = "2.5.0"
@@ -1171,6 +1412,19 @@ version = "0.3.34"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "53c0fa8157de1303bfffdaa1cc2a673bfffb60102f76b0ef4441659124373fed"
[[package]]
name = "futures-lite"
version = "2.6.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f78e10609fe0e0b3f4157ffab1876319b5b0db102a2c60dc4626306dc46b44ad"
dependencies = [
"fastrand",
"futures-core",
"futures-io",
"parking",
"pin-project-lite",
]
[[package]]
name = "futures-macro"
version = "0.3.34"
@@ -1231,6 +1485,17 @@ dependencies = [
"windows-link",
]
[[package]]
name = "getrandom"
version = "0.2.17"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ff2abc00be7fca6ebc474524697ae276ad847ad0a6b3faa4bcb027e9a4614ad0"
dependencies = [
"cfg-if",
"libc",
"wasi",
]
[[package]]
name = "getrandom"
version = "0.3.4"
@@ -1386,6 +1651,30 @@ version = "0.5.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e17592d60ebacc7d5e169f4663c5f84f9161cc90328abcfe8456f41e4dfcb284"
[[package]]
name = "hex"
version = "0.4.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
[[package]]
name = "hkdf"
version = "0.12.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7b5f8eb2ad728638ea2c7d47a21db23b7b58a72ed6a38256b8a1849f15fbbdf7"
dependencies = [
"hmac",
]
[[package]]
name = "hmac"
version = "0.12.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6c49c37c09c17a53d937dfbb742eb3a961d65a994e6bcdcf37e7399d0cc8ab5e"
dependencies = [
"digest",
]
[[package]]
name = "http"
version = "1.5.0"
@@ -1708,6 +1997,16 @@ dependencies = [
"serde_core",
]
[[package]]
name = "inout"
version = "0.1.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "879f10e63c20629ecabbb64a8010319738c66a5cd0c29b02d63d272b03751d01"
dependencies = [
"block-padding",
"generic-array",
]
[[package]]
name = "ipnet"
version = "2.12.2"
@@ -1861,6 +2160,22 @@ dependencies = [
"serde",
]
[[package]]
name = "keyring"
version = "3.6.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "eebcc3aff044e5944a8fbaf69eb277d11986064cba30c468730e8b9909fb551c"
dependencies = [
"byteorder",
"dbus-secret-service",
"log",
"secret-service",
"security-framework 2.11.1",
"security-framework 3.7.0",
"windows-sys 0.60.2",
"zeroize",
]
[[package]]
name = "khronos-egl"
version = "6.0.0"
@@ -1896,6 +2211,15 @@ version = "0.2.190"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ce5d3ddc6d3fa000eb1536d85e147bfe31aacaba692ed6a876f95cb7c855be78"
[[package]]
name = "libdbus-sys"
version = "0.2.7"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "328c4789d42200f1eeec05bd86c9c13c7f091d2ba9a6ea35acdf51f31bc0f043"
dependencies = [
"pkg-config",
]
[[package]]
name = "libloading"
version = "0.8.9"
@@ -2042,6 +2366,15 @@ dependencies = [
"libc",
]
[[package]]
name = "memoffset"
version = "0.9.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "488016bfae457b036d996092f6cb448677611ce4449e970ceaf42695203f218a"
dependencies = [
"autocfg",
]
[[package]]
name = "mime"
version = "0.3.17"
@@ -2157,7 +2490,7 @@ dependencies = [
"openssl-probe",
"openssl-sys",
"schannel",
"security-framework",
"security-framework 3.7.0",
"security-framework-sys",
"tempfile",
]
@@ -2192,6 +2525,19 @@ dependencies = [
"jni-sys 0.3.1",
]
[[package]]
name = "nix"
version = "0.29.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "71e2746dc3a24dd78b3cfcb7be93368c6de9963d30f43a6a73998a9cf4b17b46"
dependencies = [
"bitflags 2.13.2",
"cfg-if",
"cfg_aliases",
"libc",
"memoffset",
]
[[package]]
name = "nix"
version = "0.31.3"
@@ -2210,6 +2556,69 @@ version = "0.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2bf50223579dc7cdcfb3bfcacf7069ff68243f8c363f62ffa99cf000a6b9c451"
[[package]]
name = "num"
version = "0.4.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "35bd024e8b2ff75562e5f34e7f4905839deb4b22955ef5e73d2fea1b9813cb23"
dependencies = [
"num-bigint",
"num-complex",
"num-integer",
"num-iter",
"num-rational",
"num-traits",
]
[[package]]
name = "num-bigint"
version = "0.4.8"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c89e69e7e0f03bea5ef08013795c25018e101932225a656383bd384495ecc367"
dependencies = [
"num-integer",
"num-traits",
]
[[package]]
name = "num-complex"
version = "0.4.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "73f88a1307638156682bada9d7604135552957b7818057dcef22705b4d509495"
dependencies = [
"num-traits",
]
[[package]]
name = "num-integer"
version = "0.1.47"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7ce2d95d4b3734dc35aa2f45e1aa22cd416814592a4f9d9205e11affd5b8e10b"
dependencies = [
"num-traits",
]
[[package]]
name = "num-iter"
version = "0.1.46"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c92800bd69a1eac91786bcfe9da64a897eb72911b8dc3095decbd07429e8048b"
dependencies = [
"num-integer",
"num-traits",
]
[[package]]
name = "num-rational"
version = "0.4.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f83d14da390562dca69fc84082e73e548e1ad308d24accdedd2720017cb37824"
dependencies = [
"num-bigint",
"num-integer",
"num-traits",
]
[[package]]
name = "num-traits"
version = "0.2.19"
@@ -2698,6 +3107,16 @@ dependencies = [
"num-traits",
]
[[package]]
name = "ordered-stream"
version = "0.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9aa2b01e1d916879f73a53d01d1d6cee68adbb31d6d9177a8cfce093cced1d50"
dependencies = [
"futures-core",
"pin-project-lite",
]
[[package]]
name = "owned_ttf_parser"
version = "0.25.1"
@@ -2709,7 +3128,7 @@ dependencies = [
[[package]]
name = "papercraft"
version = "0.4.0"
version = "0.7.1"
dependencies = [
"arboard",
"axum",
@@ -2727,6 +3146,8 @@ dependencies = [
"i_overlay",
"image",
"js-sys",
"keyring",
"libc",
"log",
"lyon",
"miniz_oxide 0.9.1",
@@ -2757,6 +3178,12 @@ dependencies = [
"winresource",
]
[[package]]
name = "parking"
version = "2.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f38d5652c16fde515bb1ecef450ab0f6a219d619a7274976324d5e377f7dceba"
[[package]]
name = "parking_lot"
version = "0.12.5"
@@ -2837,6 +3264,17 @@ version = "0.2.17"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
[[package]]
name = "piper"
version = "0.2.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c835479a4443ded371d6c535cbfd8d31ad92c5d23ae9770a61bc155e4992a3c1"
dependencies = [
"atomic-waker",
"fastrand",
"futures-io",
]
[[package]]
name = "pkg-config"
version = "0.3.34"
@@ -2956,7 +3394,7 @@ checksum = "1f21b97672d2dc848e7b25701ab4535618b92f4861c13cc3f7f7bed52ad3c8da"
dependencies = [
"futures",
"indexmap",
"nix",
"nix 0.31.3",
"tokio",
"tracing",
"windows",
@@ -3010,13 +3448,24 @@ version = "6.0.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f8dcc9c7d52a811697d2151c701e0d08956f92b0e24136cf4cf27b57a6a0d9bf"
[[package]]
name = "rand"
version = "0.8.8"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e058c7de0b26af77780c769414d6257830bb240f3c38477dbc2c16e5f54d6d4c"
dependencies = [
"libc",
"rand_chacha 0.3.1",
"rand_core 0.6.4",
]
[[package]]
name = "rand"
version = "0.9.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b9ef1d0d795eb7d84685bca4f72f3649f064e6641543d3a8c415898726a57b41"
dependencies = [
"rand_chacha",
"rand_chacha 0.9.0",
"rand_core 0.9.5",
]
@@ -3031,6 +3480,16 @@ dependencies = [
"rand_core 0.10.1",
]
[[package]]
name = "rand_chacha"
version = "0.3.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
dependencies = [
"ppv-lite86",
"rand_core 0.6.4",
]
[[package]]
name = "rand_chacha"
version = "0.9.0"
@@ -3041,6 +3500,15 @@ dependencies = [
"rand_core 0.9.5",
]
[[package]]
name = "rand_core"
version = "0.6.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
dependencies = [
"getrandom 0.2.17",
]
[[package]]
name = "rand_core"
version = "0.9.5"
@@ -3460,6 +3928,38 @@ dependencies = [
"tiny-skia 0.11.4",
]
[[package]]
name = "secret-service"
version = "4.0.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e4d35ad99a181be0a60ffcbe85d680d98f87bdc4d7644ade319b87076b9dbfd4"
dependencies = [
"aes",
"cbc",
"futures-util",
"generic-array",
"hkdf",
"num",
"once_cell",
"rand 0.8.8",
"serde",
"sha2",
"zbus",
]
[[package]]
name = "security-framework"
version = "2.11.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "897b2245f0b511c87893af39b033e5ca9cce68824c4d7e7630b5a1d339658d02"
dependencies = [
"bitflags 2.13.2",
"core-foundation 0.9.4",
"core-foundation-sys",
"libc",
"security-framework-sys",
]
[[package]]
name = "security-framework"
version = "3.7.0"
@@ -3560,6 +4060,17 @@ dependencies = [
"serde_core",
]
[[package]]
name = "serde_repr"
version = "0.1.21"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8d3b1629de253c70a0508c3899572da79ca359fdab27c7920ff00406df418906"
dependencies = [
"proc-macro2",
"quote",
"syn 3.0.7",
]
[[package]]
name = "serde_spanned"
version = "1.1.2"
@@ -3592,6 +4103,17 @@ dependencies = [
"digest",
]
[[package]]
name = "sha2"
version = "0.10.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a7507d819769d01a365ab707794a4084392c824f54a7a6a7862f8c3d0892b283"
dependencies = [
"cfg-if",
"cpufeatures 0.2.17",
"digest",
]
[[package]]
name = "shlex"
version = "2.0.1"
@@ -3801,6 +4323,12 @@ dependencies = [
"float-cmp",
]
[[package]]
name = "subtle"
version = "2.6.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
[[package]]
name = "svgtypes"
version = "0.16.1"
@@ -3860,10 +4388,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "32497e9a4c7b38532efcdebeef879707aa9f794296a4f0244f6f69e9bc8574bd"
dependencies = [
"fastrand",
"getrandom 0.3.4",
"getrandom 0.4.3",
"once_cell",
"rustix 1.1.5",
"windows-sys 0.52.0",
"windows-sys 0.61.2",
]
[[package]]
@@ -4241,6 +4769,17 @@ version = "1.20.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b6f5e870be6c3b371b77fe0ee0bafb859fa4964b4404c27de1d380043c4dda20"
[[package]]
name = "uds_windows"
version = "1.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f2f6fb2847f6742cd76af783a2a2c49e9375d0a111c7bef6f71cd9e738c72d6e"
dependencies = [
"memoffset",
"tempfile",
"windows-sys 0.60.2",
]
[[package]]
name = "unicode-bidi"
version = "0.3.18"
@@ -5253,6 +5792,16 @@ version = "0.3.11"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "163b33ed8786455e2fa5d72f554057ce3f3182425434f756cd39c99839d88e23"
[[package]]
name = "xdg-home"
version = "1.3.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ec1cdab258fb55c0da61328dc52c8764709b249011b2cad0454c72f0bf10a1f6"
dependencies = [
"libc",
"windows-sys 0.59.0",
]
[[package]]
name = "xkbcommon-dl"
version = "0.4.2"
@@ -5307,6 +5856,62 @@ dependencies = [
"synstructure",
]
[[package]]
name = "zbus"
version = "4.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "bb97012beadd29e654708a0fdb4c84bc046f537aecfde2c3ee0a9e4b4d48c725"
dependencies = [
"async-broadcast",
"async-process",
"async-recursion",
"async-trait",
"enumflags2",
"event-listener",
"futures-core",
"futures-sink",
"futures-util",
"hex",
"nix 0.29.0",
"ordered-stream",
"rand 0.8.8",
"serde",
"serde_repr",
"sha1",
"static_assertions",
"tracing",
"uds_windows",
"windows-sys 0.52.0",
"xdg-home",
"zbus_macros",
"zbus_names",
"zvariant",
]
[[package]]
name = "zbus_macros"
version = "4.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "267db9407081e90bbfa46d841d3cbc60f59c0351838c4bc65199ecd79ab1983e"
dependencies = [
"proc-macro-crate",
"proc-macro2",
"quote",
"syn 2.0.119",
"zvariant_utils",
]
[[package]]
name = "zbus_names"
version = "3.0.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4b9b1fef7d021261cc16cba64c351d291b715febe0fa10dc3a443ac5a5022e6c"
dependencies = [
"serde",
"static_assertions",
"zvariant",
]
[[package]]
name = "zerocopy"
version = "0.8.62"
@@ -5353,6 +5958,20 @@ name = "zeroize"
version = "1.9.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e13084392c5e4bc371903e2935a5eaeed24905a7511356b883835e18a78f6879"
dependencies = [
"zeroize_derive",
]
[[package]]
name = "zeroize_derive"
version = "1.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3c50655cbb0fe3fc43170059e702f1ce5e19b84cec58dc87b037a09935c2f328"
dependencies = [
"proc-macro2",
"quote",
"syn 2.0.119",
]
[[package]]
name = "zerotrie"
@@ -5413,3 +6032,40 @@ checksum = "27bc9d5b815bc103f142aa054f561d9187d191692ec7c2d1e2b4737f8dbd7296"
dependencies = [
"zune-core",
]
[[package]]
name = "zvariant"
version = "4.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2084290ab9a1c471c38fc524945837734fbf124487e105daec2bb57fd48c81fe"
dependencies = [
"endi",
"enumflags2",
"serde",
"static_assertions",
"zvariant_derive",
]
[[package]]
name = "zvariant_derive"
version = "4.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "73e2ba546bda683a90652bac4a279bc146adad1386f25379cf73200d2002c449"
dependencies = [
"proc-macro-crate",
"proc-macro2",
"quote",
"syn 2.0.119",
"zvariant_utils",
]
[[package]]
name = "zvariant_utils"
version = "2.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c51bcff7cc3dbb5055396bcf774748c3dab426b4b8659046963523cee4808340"
dependencies = [
"proc-macro2",
"quote",
"syn 2.0.119",
]
+5 -1
View File
@@ -1,6 +1,6 @@
[package]
name = "papercraft"
version = "0.4.0"
version = "0.7.1"
edition = "2024"
rust-version = "1.95"
description = "A native infinite-canvas app for planning, working and sketching"
@@ -93,6 +93,10 @@ axum = { version = "0.8", default-features = false, features = ["http1", "tokio"
tokio-util = "0.7"
# Shared-project sync; the system TLS stack so https servers work without bundling one.
reqwest = { version = "0.13", default-features = false, features = ["native-tls"] }
# Anthropic API key in the OS keychain (chat API backend). Linux uses the Secret Service (persistent; keyutils is not).
# libc: SIGINT to the spawned chat CLIs.
keyring = { version = "3", default-features = false, features = ["apple-native", "windows-native", "sync-secret-service", "crypto-rust"] }
libc = "0.2"
# Browser build (`src/web.rs`): canvas + WebGPU/WebGL surface, DOM events instead of winit.
[target.'cfg(target_arch = "wasm32")'.dependencies]
+44 -2
View File
@@ -1,6 +1,6 @@
# Progress
Last updated: 2026-10-21.
Last updated: 2026-10-24.
## Phase 3: local-first design and whiteboard tool
@@ -34,7 +34,7 @@ are credited in `THIRD_PARTY.md`.
to that page's own document and history (`Editor::with_page`) without switching the view.
* **Bridge** (`paper-rs-mcp`): rmcp stdio server that lists tools offline and relays calls to
the app over HTTP, reconnecting after app restarts.
* **Tools** (`src/mcp/tools.rs`): 53 tools, using Paper's names and argument shapes where there is an
* **Tools** (`src/mcp/tools.rs`): 53 tools at the time (61 now), using Paper's names and argument shapes where there is an
equivalent (see README), plus `create_shape`, `select_nodes`, `undo`, `redo`.
`write_html` (`src/mcp/{html,css}.rs`, `exec.rs` `Builder`) maps flex/block layout onto auto
layout with CSS stretch semantics, text styles and rich-text runs, backgrounds, gradients,
@@ -76,12 +76,54 @@ are credited in `THIRD_PARTY.md`.
* **Not carried over**: comments, design tokens, AI image generation, video export, teams;
moving layers between pages; remote image URLs (see README Known gaps).
### 2026-10-24: 0.7.1 (rename fix)
* Enter, Escape and clicking away end a rename again (projects on the home screen, library assets, versions). The fields took focus back before checking whether they had lost it.
### 2026-10-24: 0.7.0 (images, research, plugins, fewer tokens)
* Images in chat: paste from the clipboard (Cmd/Ctrl+V with an image-only clipboard now reaches the composer), thumbnails in the composer and in sent messages, a lightbox, image-only messages. Attachments are sent at most 1568 px (originals kept); `zoom_image` reads a region of the original.
* Brief and finish: `ask_user` draws questions as a card of clickable answers (palette swatches, reference image tiles, the recommended answer marked). The chat rules ask for a brief before the first design, variables and components first, sizes from the agreed density, a short report and next steps as a card.
* Web research (the composer's Web chip): `fetch_reference_images` (public addresses only, icons, logos and backdrops dropped, social cards last), a References gallery that dims what the agent did not keep; on Claude Code a Haiku `researcher` sub-agent does the searching.
* Image generation, opt-in (Settings, Chat, Images): Codex (offered once when signed in with a ChatGPT plan), Google Flow through `gf`, or any command (`{prompt}`, `{aspect}`, `{ratio}`, `{out}`, passed as data).
* Plugins (Settings, Plugins): Avataaars, DiceBear, Iconify, Lorem Picsum, Flags, QR codes, placed with `<x-plugin use="…">`, cached on disk. SVG import draws masked groups as images (Avataaars).
* Tokens: lean Claude Code sessions (42.7k to 20.6k prompt tokens), deferred tool schemas and context editing on the API, a fresh session with a recap past 120k (or on demand from the meter), per-turn cost for resumed Claude Code sessions, a 1M context meter, a turn budget. Model and effort pickers for Claude Code.
* Also: page switcher in the Chat top bar, steps stay folded while a turn runs (no flicker), `lint_design` asks 24 px targets on desktop screens, the installer keeps `papercraft-mcp` current.
* Evidence: `src/mcp/{refs,imagegen}.rs`, `src/plugins.rs`, `src/io/svg_import.rs`, `src/ui/{chat,chat_msgs,chat_agents,settings}.rs`, `src/chat/{anthropic,claude_code}.rs`, `tests/chat_tools.rs`, `specs/chat-tokens/spec.md`.
### 2026-10-22: 0.6.1 (agents via ACP, annotations)
* Agents are found through the login shell's PATH (read once at startup, 3 s limit, merged with the app PATH and the usual folders), so an app opened from the Dock finds Claude Code, Codex and the rest. No install instructions anywhere; a missing agent shows Not found with Set path… and Docs.
* ACP backend (`src/chat/acp.rs`): any agent that speaks the Agent Client Protocol over stdio, with PaperCraft's MCP server, streamed updates, permission flow, cancel and load. Registry as data in `src/chat/agents.rs`: native agents found on PATH, npx agents off until enabled, custom agents by name, command and arguments. Verified here: OpenCode works; Gemini CLI's server currently refuses ACP clients; Cursor needs `cursor-agent login`; Pi works through `pi-acp` after enabling.
* Agent panel over the chat column (Detected, Enable via npx, Not found, API endpoints, Custom, search), a Connect an agent setup card, a sign-in card, and multiple `@ Selection` chips.
* Settings → Chat redesigned: one agents list with details, endpoints, defaults, scrolling page on one label grid.
* Send bug: a turn that cannot start keeps the typed text and shows an error row with Retry, never a silent no-op (`a_failed_start_keeps_the_text_and_shows_an_error`).
* Annotations: notes with leader lines on a page, six categories with keys (style comes only from the category), project and per-page templates with built-ins and a Customize modal, view modes (⌘⇧A), Annotate tool (N), side view, inspector section, Annotate with AI, six MCP tools (`annotate` batches), and comments in `get_design_spec` and the code exports. Exports and Present leave annotations out.
* Evidence: `src/chat/{path,agents,acp}.rs`, `src/ui/{chat_agents,annotations,annotations_canvas}.rs`, `src/model/annotation.rs`, `src/editor/annotations.rs`, `src/mcp/tools.rs`, `tests/annotations*.rs`, `specs/chat-agents/`, `specs/annotations/`, `docs/chat.md`, `docs/annotations.md`.
### 2026-10-21: Chat mode
* Chat layout next to the canvas (⌘J, `Design | Chat`), with three backends: Claude Code and Codex through their CLIs (`claude -p` stream-json, `codex exec --json`) against the app's MCP server, and the Anthropic API with a key in the OS credential store. One event stream for all three; tool calls run through the same MCP dispatch, so runs, review and revert behave as before.
* Thread: markdown replies, thinking row, tool cards, step groups, plan from `TodoWrite`, approval for destructive tools on the API backend, run checkpoints with Restore to here, usage line and context meter, `@ Selection` and image attachments, Stop.
* Chats live in the project's `chats/` folder. Settings → Chat holds CLI paths, the default backend and the API key.
* Offline CLI fix: an offline save writes no camera, and a top-level shape created without a position goes to the next free spot instead of the origin.
* Evidence: `src/chat/`, `src/ui/chat.rs`, `src/ui/chat_msgs.rs`, `src/ui/chat_md.rs`, `src/ui/settings.rs`, `src/mcp/exec.rs`, `tests/fixtures/chat/`, `specs/chat/`, `docs/chat.md`.
### 2026-10-21: Agent runs and change review
* Agent editing calls group into runs, snapshot each edited page as `Before agent run N`, and end on 30 seconds idle, `finish_working_on_nodes`, or project switch. Runs persist under `runs/` and keep the newest 50.
* Agent view lists runs and supports review, whole-run revert, per-change undo and accept all. Review adds canvas outlines and a finish toast; palette commands review or revert the last run.
* Id-paired page diffs power review; History version compare UI remains todo. Completed with full restore (including variables, modes and tokens), tool edit classification, and wasm support.
### 2026-10-21: Design libraries and offline CLI
* Variables are now collections with modes, slash groups, four types and aliases, stored in `design.json` (project version 2; 0.4.0 refuses migrated projects). Each page keeps a derived cache; every edit is one undo step per page, and the page-only removals are gone. Per-page active mode per collection.
* Fields bind to variables (stroke, text color, size, gap, padding, radius, font size, line height, opacity, visible) in the inspector and with `bind_variable`; gradients do not bind yet.
* Instances work across pages (`component_key`, source page or library); deleting a main flags its instances.
* Libraries: publish a snapshot (`library.json`), enable, update with review (overrides kept), disable, and keep working when the source is missing. Variables modal, Libraries modal and Assets view in the UI; `create_collection`, `delete_variables`, `bind_variable` and five `*_library` tools in MCP (61 tools).
* `papercraft-cli call --offline` and `papercraft-cli shell` run the tools in-process on the project store, refuse a project the app has open, and fall back to the software adapter for screenshots. See `docs/agents.md`.
* Evidence: `src/variables.rs`, `src/editor/design.rs`, `src/libraries.rs`, `src/cli.rs`, `tests/{libraries,cross_page_components,variables_ui,assets_panel,cli_offline}.rs`, specs in `specs/design-libraries/` and `specs/cli-offline/`.
### P6 notes
* **Export** (`io/export.rs`): scope = selection, each frame, page or all pages; format =
+169 -243
View File
@@ -1,365 +1,291 @@
<h1 align="center">PaperCraft</h1>
<p align="center">
<b>Design and whiteboarding on an infinite canvas; a native, local-first, agent-driven design tool, built in pure Rust.</b>
<b>A native, local-first design and whiteboard canvas that AI agents can drive.</b>
</p>
<p align="center">
Frames, auto layout, components, variables and icons, plus a hand-drawn whiteboard mode,<br>
in a native app written entirely in Rust. Open source, offline, and drivable by AI agents.
</p>
<p align="center">
<img alt="Status: early alpha" src="https://img.shields.io/badge/status-early%20alpha-d69e2e?style=flat-square">
<img alt="100% Rust" src="https://img.shields.io/badge/100%25-Rust-b7410e?style=flat-square&logo=rust">
<img alt="Native on egui and wgpu" src="https://img.shields.io/badge/egui%20%C2%B7%20wgpu-native-2f7bf5?style=flat-square">
<img alt="MCP server and CLI for agents" src="https://img.shields.io/badge/agents-MCP%20%2B%20CLI-555555?style=flat-square">
<img alt="Status: alpha" src="https://img.shields.io/badge/status-alpha-d69e2e?style=flat-square">
<img alt="Rust" src="https://img.shields.io/badge/Rust-egui%20%C2%B7%20wgpu-b7410e?style=flat-square&logo=rust">
<img alt="Agents: MCP and CLI" src="https://img.shields.io/badge/agents-MCP%20%2B%20CLI-555555?style=flat-square">
<img alt="License: MIT OR Apache-2.0" src="https://img.shields.io/badge/license-MIT%20%2F%20Apache--2.0-3a3a3a?style=flat-square">
</p>
<br>
<p align="center">
<img src="docs/screenshots/app_demo.png" alt="PaperCraft with a launch plan: a Week plan frame with sticky notes and a progress bar, a Sketches frame with hand-drawn shapes, the Layers panel and the Design inspector" width="100%">
<img src="docs/screenshots/readme/hero.png" alt="PaperCraft with the Redesign page of its own design file open: layers on the left, the canvas in the middle, the inspector on the right" width="100%">
<br>
<sub>A planning board: frames, sticky notes, a progress bar, hand-drawn sketches, the Layers panel and the Design inspector.</sub>
<sub>PaperCraft editing its own design file (the Redesign page).</sub>
</p>
<p align="center">
<a href="#what-it-is">What it is</a> ·
<a href="#features">Features</a> ·
<a href="#drive-it-with-agents">Agents</a> ·
<a href="#design-systems-variables-components-icons">Design systems</a> ·
<a href="#agents">Agents</a> ·
<a href="#get-started">Get started</a> ·
<a href="#keyboard-shortcuts">Shortcuts</a> ·
<a href="#status">Status</a> ·
<a href="#downloads">Downloads</a> ·
<a href="#status-and-known-limits">Status</a> ·
<a href="#project-layout">Layout</a> ·
<a href="#license-and-credits">License</a>
</p>
<br>
## What it is
<table>
<tr>
<td width="25%" valign="top">
<h3>Local-first</h3>
Projects are plain folders of JSON in <code>~/Documents/papercraft</code>. Autosave with atomic writes, no account, no cloud.
</td>
<td width="25%" valign="top">
<h3>Native and fast</h3>
egui on wgpu (Metal, Vulkan, DX12). No Electron, no web view. Cached tessellation: a frame with 10k visible nodes draws in about 3 ms.
</td>
<td width="25%" valign="top">
<h3>Design and whiteboard</h3>
Auto layout, components and variables next to hand-drawn shapes, bound arrows, sticky notes and a laser pointer, on the same canvas.
</td>
<td width="25%" valign="top">
<h3>Agent-ready</h3>
40 MCP tools and a shell CLI. Agents write HTML into layers, screenshot the result and lint it, one undo step per call.
</td>
</tr>
</table>
PaperCraft is an infinite-canvas design tool and whiteboard written in Rust (egui on wgpu). It runs as a desktop app with no account and no cloud: a project is a folder of JSON files on your disk. It also serves the Model Context Protocol and ships a CLI, so an agent such as Claude Code or Codex can read and edit the open canvas, screenshot the result and lint it, one undo step per tool call.
<br>
It is an alpha. It is good for building screens, design systems and sketches, and it is not a replacement for a mature design tool. See [Status and known limits](#status-and-known-limits).
## Features
**Canvas and layout**
* Frames with clipping, groups, vector shapes with the Pen and Bézier editing, boolean operations, gradients, image fills, strokes, per-corner radii, opacity and blend modes, drop shadows, rich text, smart guides, measurements, align and distribute.
* Auto layout (direction, gap, padding, hug, fill, wrap, space-between) and constraints.
* A layers tree you can drag to reorder or re-parent, an inspector with Design and Prototype tabs, and a command palette over every action, page and layer (⌘K).
* Whiteboard mode: hand-drawn (rough.js-style) shapes, arrows bound to shapes, elbow connectors, sticky notes, freehand ink and a laser pointer on the same canvas.
* Pages: each page is its own canvas with its own undo history and view.
**Design systems**
* **Components** work across pages and across projects. Edit a main component and its instances follow, except the properties an instance overrode.
* **Shared libraries:** publish a project as a library, enable it in other projects, and take updates when it changes.
* **Variables:** collections with modes, slash groups (`color/brand/primary`), types (color, number, string, boolean) and aliases. Fills, strokes, text color, size, gap, padding, radius, font size, line height, opacity and visibility bind to variables.
* **Variables modal** (⌘⌥⇧V, or "Variables…" in the palette) to edit all of it; **Assets view** (side tab) with components grouped by name; **Libraries modal** to publish, enable and update.
* Lint (`lint_design`) for contrast, the 4px grid, type scale, touch targets, default names and hard-coded colors, with auto-fix.
* Design tokens out as CSS, JSON (W3C DTCG) or Tailwind `@theme`; code out as JSX with inline styles, Tailwind or HTML.
<table>
<tr>
<td width="50%" valign="top">
<img src="docs/screenshots/milestone3_figma_core.png" alt="A design with frames, auto layout, a component and its instances, and vector shapes" width="100%">
<br>
<h3>Design tools</h3>
Frames with clipping, groups, components with instances and per-property overrides, auto layout (direction, gap, padding, hug, fill, wrap, space-between), constraints, the Pen with Bézier editing, boolean operations, gradients, image fills, strokes, per-corner radii, opacity and blend modes, rich text, smart guides and measurements, align and distribute.
<img src="docs/screenshots/readme/variables.png" alt="The Variables modal listing the Colors collection with four Catppuccin modes" width="100%">
<br><sub>Variables modal: collections, modes, groups and types.</sub>
</td>
<td width="50%" valign="top">
<img src="docs/screenshots/milestone4_whiteboard.png" alt="A whiteboard with hand-drawn shapes, bound arrows, an elbow connector and sticky notes" width="100%">
<br>
<h3>A whiteboard that sketches</h3>
Hand-drawn (rough.js-style) rectangles, ellipses, diamonds and lines, arrows that bind to shapes and re-route when they move, elbow connectors, sticky notes, freehand ink with pressure, a laser pointer and a shape library.
<img src="docs/screenshots/readme/assets.png" alt="The Assets side view with components grouped into Banner, Button, Checkbox and Chip" width="100%">
<br><sub>Assets view: components grouped by name, from this file and enabled libraries.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="docs/screenshots/milestone5_inspector.png" alt="The inspector with position, size, constraints, auto layout, fills, strokes and export sections" width="100%">
<br>
<h3>Inspector, layers and a palette</h3>
A sectioned inspector, a layers tree you can drag to reorder or re-parent, 100+ keyboard shortcuts, and a command palette over every action, page and layer (⌘K).
<img src="docs/screenshots/readme/libraries.png" alt="The Libraries modal with one enabled library" width="100%">
<br><sub>Libraries modal: publish this file, enable libraries from the store.</sub>
</td>
<td width="50%" valign="top">
<img src="docs/screenshots/milestone6_svg_import.png" alt="An imported SVG on the canvas" width="100%">
<br>
<h3>Import and export</h3>
Export a selection, each frame, a page or the whole project to PNG (1 to 4x), SVG or vector PDF. Import <code>.excalidraw</code> scenes and libraries, SVG and images; paste between pages, projects and apps.
<img src="docs/screenshots/readme/agent-review.png" alt="Agent run review: a list of changes on the left and green, yellow and red outlines on the canvas" width="100%">
<br><sub>Review of an agent run, with the changes outlined on the canvas.</sub>
</td>
</tr>
</table>
### Themes
**Prototyping and review**
* Prototype links between frames and a **Present** mode that follows them with a camera glide.
* **Version history:** named and automatic saved versions per page; rename, restore, delete.
* **Agent runs:** editing tool calls group into a run. PaperCraft saves an auto-version before the first edit, lists the run, and lets you review it (added, changed and removed layers, outlined on the canvas), revert one change, revert the whole run or accept it.
* **Comments** on the canvas.
System, Light, Dark and the four Catppuccin flavours: Latte, Frappé, Macchiato and Mocha. Pick one in **View › Theme** or search "theme" in the ⌘K palette.
**Sharing and platforms**
* **Shared projects** through an optional relay (`papercraft-relay`); concurrent edits to a page are merged. Without a relay nothing leaves your machine.
* **Themes:** System, Light, Dark and the four Catppuccin flavours (Latte, Frappé, Macchiato, Mocha).
* **Web build** that runs the editor in the browser (`sh web/build.sh`, served by `papercraft-relay --static web`).
* **Import and export:** Figma `.fig` files, `.excalidraw` scenes and libraries, SVG and images in; PNG (1 to 4x), SVG and vector PDF out, for a selection, each frame, a page or the whole project.
### Projects and pages
Projects live in `~/Documents/papercraft/<name>/` (`project.json`, one JSON file per page in `pages/`, plus `versions/`, `runs/` and library files). Work autosaves with atomic writes and files are versioned and migrated on load. `PAPERCRAFT_HOME` points to another folder.
PaperCraft opens on a **home screen** of your projects (recents grid with thumbnails; New, Import, and Rename, Duplicate or Move to Trash from each card's ⋯ menu or right-click; restore from Trash). A project is a folder in `~/Documents/papercraft/<name>/` with `project.json` and one JSON file per page in `pages/`. Work autosaves about a second after each change with crash-safe atomic writes; files are versioned and older versions migrate on load. Set `PAPERCRAFT_HOME` to use another folder. If you used the app under its earlier name, `~/Documents/paper-rs` is still read when it is the only one that exists.
## Agents
Each project has any number of **pages** (the Pages list at the top of the left sidebar: + to add, double-click to rename, right-click to duplicate or delete, drag to reorder). Each page is its own infinite canvas with its own undo history and view. Copy and paste works between pages and projects.
PaperCraft exposes **70 tools** (`src/mcp/tools.rs`) three ways. They run the same code inside the app.
### File formats
| Format | Use |
| Way | Notes |
|---|---|
| Project folder (`project.json` + `pages/*.json`) | The native format. Plain, versioned JSON. |
| `.papercraft` | A single-file document (`papercraft FILE.papercraft`, not autosaved). `--import` turns it into a project. |
| `.paper-rs` | The earlier single-file extension. Old files still open. |
| PNG, SVG, PDF | Export: selection, frames, page or all pages. PDF is vector, with gradients, images and blend modes. |
| `.excalidraw`, `.excalidrawlib`, SVG, images | Import (drag and drop, ⌘O, or `--import`). |
## Drive it with agents
![A sign-in screen written by an agent through write_html](docs/screenshots/milestone7_mcp.png)
PaperCraft serves the [Model Context Protocol](https://modelcontextprotocol.io) while it runs, so agents such as Claude Code and Codex can read and design on the open canvas. Every tool call runs through the editor like a user edit: one undo step per call, and the window repaints immediately. Tool names and arguments follow other design-tool MCP servers where there is an equivalent, so prompts written for them carry over.
<table>
<tr>
<td width="33%" valign="top">
<img src="docs/screenshots/agent_signin.png" alt="A dark sign-in screen built from a component, an icon and variables" width="100%">
<br><sub>A sign-in screen: variables, an icon and a component instance.</sub>
</td>
<td width="67%" valign="top">
<img src="docs/screenshots/agent_dashboard.png" alt="A dashboard with a sidebar, three stat cards and a bar chart" width="100%">
<br><sub>A dashboard written in one <code>write_html</code> call, then checked with <code>lint_design</code>.</sub>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<img src="docs/screenshots/agent_landing.png" alt="A landing page with a hero and three feature cards" width="100%">
<br><sub>A landing page: hero, call to action and feature cards, all colors from variables.</sub>
</td>
</tr>
</table>
* **Streamable HTTP** (built into the app): `http://127.0.0.1:29980/mcp`. Loopback only; requests from browsers (with an `Origin` header) and foreign `Host` headers are rejected. `PAPERCRAFT_MCP_PORT=NNNN` changes the port; `PAPERCRAFT_MCP=0` turns the server off.
* **stdio**: `papercraft-mcp` (built next to `papercraft`) relays stdio to the running app. It lists the tools even when the app is closed, and tells the agent to start PaperCraft if a call can't reach it.
* **Shell**: `papercraft-cli` calls the same tools, so an agent with a terminal needs no schemas in its context.
### Claude Code
| MCP over HTTP | Built into the app: `http://127.0.0.1:29980/mcp`. Loopback only; browser requests (with an `Origin` header) and foreign `Host` headers are rejected. `PAPERCRAFT_MCP_PORT` changes the port, `PAPERCRAFT_MCP=0` turns it off. |
| MCP over stdio | `papercraft-mcp` relays stdio to the running app. It lists tools even when the app is closed. |
| Shell | `papercraft-cli` calls the same tools, so an agent with a terminal needs no schemas in its context. |
```sh
# HTTP (the app must be running)
# Claude Code
claude mcp add --transport http --scope user papercraft http://127.0.0.1:29980/mcp
# or stdio through the bridge
claude mcp add --scope user papercraft -- /path/to/papercraft-mcp
```
### Design tab
The sidebar's **Design** tab (next to Layers and Library) lists the project's color variables as
editable swatches, switches variable modes (for example the four Catppuccin flavours), and lists the
page's components with Go to and Insert buttons. Editing a variable recolours every fill that follows it.
### Codex
```sh
# Codex
codex mcp add papercraft --url http://127.0.0.1:29980/mcp
# or stdio
codex mcp add papercraft -- /path/to/papercraft-mcp
```
which writes this to `~/.codex/config.toml` (either form works):
The main write tool is `write_html`: HTML with inline styles becomes layers (flexbox maps onto auto layout), and `update_styles` takes the same CSS as JSON. Other groups cover reading and screenshots, variables and bindings, components, libraries, icons, lint, diffs, export and agent-run bookkeeping. The full list is `papercraft-cli list`; each schema is `papercraft-cli schema <tool>`; the reference is [skills/papercraft/references/tools.md](skills/papercraft/references/tools.md).
```toml
[mcp_servers.papercraft]
url = "http://127.0.0.1:29980/mcp"
# command = "/path/to/papercraft-mcp"
```
### Without the app
Then ask the agent something like *"In PaperCraft, create a 390×844 mobile artboard and design a sign-in screen"*, or *"draw a flowchart of our deploy process on a new page, hand-drawn style"*. The [`papercraft` and `papercraft-design` agent skills](skills) teach an agent the workflow (build, screenshot, lint, fix) and design rules; [docs/agents.md](docs/agents.md) has the full guide.
### Shell (no MCP client needed)
The app must be running with a project open.
`papercraft-cli` works with PaperCraft closed. When nothing answers on the port, or with `--offline`, tools run inside the CLI on the project store and every editing call is saved; the project opens normally in the app later. With the app open on a project, `--offline` on that same project is refused, so two writers never share a folder. Screenshots use the GPU, or the software adapter when there is none.
```sh
papercraft-cli list # tool names, one line each (works offline)
papercraft-cli schema write_html # one tool's full schema
papercraft-cli call get_basic_info
papercraft-cli call create_artboard '{"name":"Hero","styles":{"width":"800px","height":"400px"}}'
echo '{"nodeId":"12"}' | papercraft-cli call get_screenshot - --out hero.png
papercraft-cli call create_file '{"name":"Demo"}' --offline
papercraft-cli call get_screenshot '{"nodeId":"abc123:1"}' --project Demo -o card.png
```
Text goes to stdout, images are saved to `--out` (default `<tool>.png`) and the path is printed, and the exit status is 1 on a tool error or when the app isn't running.
### Tools
| Group | Tools |
|---|---|
| Projects & pages | `list_resources`, `open_file`, `create_file`, `create_page`, `rename_pages`, `delete_pages` |
| Read | `get_basic_info`, `get_selection`, `get_node_info`, `get_children`, `get_tree_summary`, `get_computed_styles`, `get_jsx`, `find_nodes`, `get_fill_image`, `get_font_family_info`, `get_guide` |
| See | `get_screenshot` (PNG image content of a node or the page), `export` (PNG/SVG/PDF files), `export_combined_pdf` |
| Write | `create_artboard`, `write_html`, `update_styles`, `set_text_content`, `rename_nodes`, `duplicate_nodes`, `move_nodes`, `delete_nodes`, `finish_working_on_nodes` (saves) |
| Whiteboard and session | `create_shape` (rectangles, ellipses, diamonds, stars, stickies, text, lines, arrows bound to shapes), `select_nodes`, `undo`, `redo` |
| Design system | `get_variables`, `set_variables`, `set_variable_mode`, `get_components`, `create_component`, `create_instance`, `search_icons`, `lint_design` |
`write_html` takes HTML with inline styles: flexbox (`display:flex`, direction, gap, padding, alignment, `flex-grow`, wrap) and block stacking map onto auto layout with CSS's stretch rules; text gets size, weight, italic, color, line height, letter spacing, alignment and rich-text runs (`<b>`, `<i>`, `<span style>`); boxes get backgrounds (colors, gradients, images), borders, radii, opacity and blend modes; `<img>` takes local paths or `data:` URIs and `<svg>` is imported as vectors. `update_styles` takes the same CSS as JSON, plus the hand-drawn keys `sketch`, `roughness`, `fillStyle`, `strokeStyle`. Node ids look like `3fa9c1:14` (page and node); `pageId` lets an agent work on another page without switching the user's view. The full reference is in [skills/papercraft/references/tools.md](skills/papercraft/references/tools.md).
## Design systems: variables, components, icons
Agents (and `papercraft-cli`) get the pieces of a design system, so files aren't a pile of hex codes and copies:
`papercraft-cli shell` keeps one session open and reads a script from stdin. `:watch on` re-renders the artboard last edited to `preview.png` after every editing call (and shows it inline on iTerm2, WezTerm and kitty).
```sh
papercraft-cli call set_variables '{"variables":{"surface":"#313244","accent":"#cba6f7"}}'
papercraft-cli call write_html '{"targetNodeId":"root","mode":"insert-children","html":"<div style=\"background:var(--surface)\">…</div>"}'
papercraft-cli call create_component '{"nodeId":"<frame>","name":"Button / Primary"}'
papercraft-cli call create_instance '{"componentId":"<id>","parentId":"<frame>"}' # then set_text_content on its layers
papercraft-cli call lint_design '{"nodeId":"<frame>"}' # contrast, grid, type scale, names
papercraft-cli icons add phosphor lucide # open icon sets from npm, with their licences
papercraft-cli icons search arrow left
# in write_html: <x-paper-icon name="phosphor:gear" size="20" color="var(--accent)"/>
papercraft-cli shell --offline --project Demo <<'EOF'
set_variables {"variables":{"bg":"#1e1e2e","surface":"#313244","text":"#cdd6f4","accent":"#cba6f7"}}
:watch on
write_html {
"targetNodeId": "abc123:1",
"mode": "insert-children",
"html": "<div style='font-size:28px;color:var(--text)'>Welcome back</div>"
}
EOF
```
* **Variables** are named colors per project (`get_variables`, `set_variables`). A fill or text color written as `var(--name)` stays linked; `set_variables` moves every linked fill on every page in one undoable step, and the link is saved in the file. `set_variables` with a `mode` stores one set of values per mode (Light, Dark) and `set_variable_mode` switches the whole project. Strokes and gradients keep fixed colors; fill-based icon sets (Phosphor, Material) follow variables, stroke sets (Lucide) don't.
* **Components** (`create_component`, `create_instance`, `get_components`, `<x-paper-instance>`): edit the main component and every instance follows, except what an instance overrode (text, fills, size, ... are marked automatically when set through `set_text_content` / `update_styles`). Components and their instances live on one page.
* **Icons** live in `<data dir>/papercraft/icons/<set>/` (override with `PAPERCRAFT_ICONS`). Sets: Lucide (ISC), Tabler (MIT), Phosphor (MIT), Heroicons (MIT), Material Symbols (Apache-2.0); each keeps its licence file. `examples/taskflow.py` builds an 8-screen app with all three.
* **Lint** (`lint_design`) checks WCAG contrast, spacing on a 4px grid, the type scale, text under 12px, touch targets under 44px, default layer names and hard-coded colors that should be variables, and says how to fix each.
<p align="center">
<img src="docs/screenshots/readme/offline-shell.png" alt="preview.png written by the offline shell: a sign-in card with a heading, two fields and a button" width="240">
<br>
<sub><code>preview.png</code> from an offline shell script, with no app running.</sub>
</p>
More in [docs/design-system.md](docs/design-system.md).
### Chat
Chat mode (⌘J, or `Design | Chat` in the top bar) puts a conversation next to the canvas. It runs Claude Code and Codex through their CLIs, any agent that speaks the Agent Client Protocol (ACP, such as OpenCode, Gemini CLI or Cursor) found on your PATH, or the Anthropic API with your own key. It shows tool calls, checkpoints and run review in the thread. Chats are saved in the project's `chats/` folder. See [docs/chat.md](docs/chat.md).
<p align="center">
<img src="docs/screenshots/readme/chat.png" alt="Chat mode: the chat column on the left shows a finished agent run with its Review, Revert and Accept actions, and the canvas on the right" width="100%">
<br>
<sub>Chat mode with a finished agent run: review, revert or accept from the thread.</sub>
</p>
### Annotations
Annotations are notes that explain a design in place: business rules, behaviour, data sources, accessibility and dev notes, each a numbered card with a leader line to its layer. Categories set the look, templates say which notes a page wants (product spec, dev handoff, accessibility review and more), and the view cycles between full notes, badges and hidden with ⌘⇧A. Exports and Present mode leave them out. Agents add them in one `annotate` call. See [docs/annotations.md](docs/annotations.md).
### Skills
[`skills/`](skills) holds agent skills: `papercraft` (the build, screenshot, lint, fix loop and tool cheat sheet), `papercraft-design` (design-quality rules) and `papercraft-critique`. [docs/agents.md](docs/agents.md) is the full guide: install, registering with agents, scripts, runs and review, safety. [docs/design-system.md](docs/design-system.md) covers variables, components and libraries.
## Get started
### Download
The macOS app (`papercraft-<version>-macos-<arch>.dmg`, containing PaperCraft.app) and the command-line tools (`papercraft-cli-<version>-macos-<arch>.zip`, with `papercraft-cli` and `papercraft-mcp`) are attached to each release of [masi/papercraft](https://git.marcospaulo.dev.br/masi/papercraft/releases). Builds are ad-hoc signed and not notarized, so on another Mac open the app with right-click › Open the first time.
Releases are at [git.marcospaulo.dev.br/masi/papercraft/releases](https://git.marcospaulo.dev.br/masi/papercraft/releases).
| Build | File |
|---|---|
| macOS app (Apple silicon) | `papercraft-<version>-macos-aarch64.dmg`, containing PaperCraft.app |
| Linux (x86_64) | `papercraft-<version>-linux-x86_64.tar.gz` |
| CLI tools, macOS | `papercraft-cli-<version>-macos-aarch64.zip` (`papercraft-cli` and `papercraft-mcp`) |
| CLI tools, Linux | `papercraft-cli-<version>-linux-x86_64.tar.gz` |
macOS builds are ad-hoc signed and not notarized: on another Mac, open the app with right-click, Open the first time. Other platforms: build from source.
### Build from source
You need Rust 1.95 or newer (`rust-version` in `Cargo.toml`). Install it with [rustup](https://rustup.rs).
You need Rust 1.95 or newer (see `rust-version` in `Cargo.toml`); install it with [rustup](https://rustup.rs).
```sh
cargo build --release
./target/release/papercraft # projects home screen
./target/release/papercraft --demo # sample planning board (not saved)
./target/release/papercraft ~/Documents/papercraft/Plan # open a project folder
./target/release/papercraft board.papercraft # open a document
packaging/macos/package.sh # PaperCraft.app on a DMG, plus the CLI zip (macOS)
./target/release/papercraft # projects home screen
./target/release/papercraft ~/Documents/papercraft/Plan # open a project folder
./target/release/papercraft --demo # sample board, not saved
packaging/macos/package.sh # PaperCraft.app on a DMG, plus the CLI zip
```
**macOS:** `xcode-select --install` for the linker, then the commands above. It uses Metal through wgpu. Shortcuts use ⌘, and trackpad pinch zooms.
**macOS:** `xcode-select --install` for the linker. It renders with Metal through wgpu. **Linux:** install the runtime libraries (`sudo apt install libxkbcommon-x11-0 libxcb-xkb1 libvulkan1 mesa-vulkan-drivers` on Debian or Ubuntu); it runs on X11 and Wayland through Vulkan, with GL as a fallback, and file dialogs use the XDG desktop portal.
**Linux:** install the runtime libraries (`sudo apt install libxkbcommon-x11-0 libxcb-xkb1 libvulkan1 mesa-vulkan-drivers` on Debian/Ubuntu), then build. It runs on X11 and Wayland through Vulkan, or GL as a fallback. Shortcuts use Ctrl. File dialogs use the XDG desktop portal.
To run a test copy next to your own PaperCraft, give it its own folder and port: `PAPERCRAFT_HOME=/tmp/pc PAPERCRAFT_MCP_PORT=29998 ./target/release/papercraft`.
### Headless (servers, CI)
No display is needed. wgpu renders offscreen, through Mesa lavapipe when there is no GPU:
Headless rendering needs no display (wgpu renders offscreen, through Mesa lavapipe without a GPU):
```sh
papercraft --screenshot ui.png --demo --size 1440x900 --scale 2 # full UI
papercraft --screenshot home.png --home # projects home screen
papercraft --export-png out.png PROJECT_DIR --page 0 --scale 2 [--transparent]
papercraft --export-svg out.svg PROJECT_DIR
papercraft --export-pdf out.pdf PROJECT_DIR --frames # one PDF page per frame
papercraft --export out_dir PROJECT_DIR --format png --scope frames # a folder of PNGs
papercraft --import board.excalidraw # new project, prints its folder
papercraft --screenshot ui.png --demo --size 1440x900 --scale 2
papercraft --export-png out.png PROJECT_DIR --page 0 --scale 2
papercraft --export-pdf out.pdf PROJECT_DIR --frames
papercraft --import board.excalidraw # new project, prints its folder
```
### Tests
```sh
cargo test # unit, scenario, headless GPU and CLI tests
PAPERCRAFT_REQUIRE_GPU=1 cargo test # fail (instead of skip) when no GPU adapter exists
cargo test --no-fail-fast
PAPERCRAFT_REQUIRE_GPU=1 cargo test # fail instead of skip when there is no GPU adapter
cargo test --release --test perf -- --nocapture # 10k-element frame timings
```
The scenario tests drive the editor with synthetic pointer and keyboard events; `tests/mcp.rs` exercises every MCP tool on a headless session, then through an rmcp client over HTTP and through the `papercraft-mcp` stdio bridge. The SVG export is rasterized with resvg and compared with the GPU render.
The scenario tests drive the editor with synthetic pointer and keyboard events; `tests/mcp.rs` exercises every MCP tool on a headless session, then over HTTP and through the stdio bridge. `cargo check --lib --target wasm32-unknown-unknown` covers the web build.
## Keyboard shortcuts
⌘ on macOS, Ctrl on Linux and Windows. Press `?` or ⌘/ in the app for the full grouped list (100+ bindings), or ⌘K to search every command.
⌘ on macOS, Ctrl on Linux. Press `?` or ⌘/ in the app for the full grouped list, or ⌘K to search every command.
| Keys | Action | Keys | Action |
|---|---|---|---|
| V / 1 | Select | ⌘K | Command palette |
| H, or hold Space | Hand (pan) | ⌘Z / ⌘⇧Z | Undo / redo |
| F or A | Frame | ⌘G / ⌘⇧G | Group / ungroup |
| R / 2, O / 4, D / 3 | Rectangle, ellipse, diamond | ⌘⌥G | Frame selection |
| ⇧Y, ⇧S | Polygon, star | ⌘⌥K / ⌘⌥B | Create component / detach |
| R / 2, O / 4, D / 3 | Rectangle, ellipse, diamond | ⌘⌥G | Wrap selection in frame |
| ⇧Y, ⇧S | Polygon, star | ⌘⌥K / ⌘⌥B | Create component / detach instance |
| L / 6, ⇧L / 5 | Line, arrow | ⇧A / ⌥⇧A | Add / remove auto layout |
| P, ⇧P / 7 | Pen, pencil | ⌥A ⌥H ⌥D / ⌥W ⌥V ⌥S | Align left/center/right, top/middle/bottom |
| P, ⇧P / 7 | Pen, pencil | ⌥A ⌥H ⌥D / ⌥W ⌥V ⌥S | Align left, center, right / top, middle, bottom |
| T / 8, S | Text, sticky note | ⌥⇧H / ⌥⇧V | Distribute spacing |
| K | Laser pointer | ⌥⇧U S I E | Union, subtract, intersect, exclude |
| E / 0 | Eraser | ⌘E | Flatten |
| 9, ⌘⇧K | Place image | ⌘B / ⌘I / ⌘U / ⌘⇧X | Bold, italic, underline, strikethrough |
| Enter / ⇧Enter | Edit (text, path) / select parent | ⌘⌥H | Hand-drawn style |
| Enter / ⇧Enter | Edit / select parent | ⌘⌥H | Hand-drawn style |
| Tab / ⇧Tab | Next / previous sibling | ⇧H / ⇧V | Flip |
| ⌥-drag | Duplicate while dragging | ⌘⌥C / ⌘⌥V | Copy / paste properties |
| ⌥ hover | Measure distances | ⌘R | Rename |
| ⌘⌥⇧V | Variables | ⌘⌥C / ⌘⌥V | Copy / paste properties |
| ⌘= / ⌘- / ⇧0 | Zoom in / out / 100% | ⇧1 / ⇧2 | Zoom to fit / selection |
| PageUp / PageDown | Previous / next page | ⌘\\ | Show / hide UI |
| ⌘J | Design / Chat mode | ⌘L | Add selection to chat (Chat mode) |
| N | Annotate tool | ⌘⇧A | Annotations: full, badges, hidden |
Draw a frame around existing shapes and it adopts them; shapes drawn inside a frame become its children, and dragging a layer into or out of a frame re-parents it. Hold ⌘/Ctrl while dragging to suspend snapping.
Draw a frame around existing shapes and it adopts them; dragging a layer into or out of a frame re-parents it. Hold ⌘ while dragging to suspend snapping.
## Status
## Status and known limits
> [!IMPORTANT]
> **PaperCraft is in early alpha.** It is usable for planning, sketching and building screens, but it is not a replacement for a mature design tool. [ROADMAP.md](ROADMAP.md) lists what is missing, in priority order; [PROGRESS.md](PROGRESS.md) is the milestone history.
Known limits:
> PaperCraft is an alpha. [ROADMAP.md](ROADMAP.md) lists what is missing, in priority order; [PROGRESS.md](PROGRESS.md) is the milestone history.
* **No rotation.** Nodes are axis-aligned boxes; rotated imports are baked into paths.
* **Text** is Inter only (regular, bold, italic, bold italic) with no shaping: no ligatures, complex scripts or RTL, and no font picker. IME preedit is not displayed (committed text works).
* **Rendering approximations.** Frame clipping is a rectangle, so rounded frames don't clip their corners. Group opacity multiplies into children. Overlay, dodge, burn, light, difference, exclusion and the HSL blend modes draw as Normal on the canvas (they are exact in SVG export).
* **Booleans are destructive**: the result is a new vector path with flattened curves.
* **Variables are colors only** and apply to fills and text color; strokes and gradients keep fixed colors.
* **`write_html`** ignores margin, grid, tables, shadows and transforms (it reports them as `ignoredStyles`). Remote `http(s)` images aren't fetched; pass a local path or a `data:` URI.
* **MCP**: one project is open at a time, so `fileId` must name the open project. Moving or duplicating layers between pages isn't supported.
* **Pen pressure.** winit 0.30 does not expose tablet pressure for pen events that arrive as mouse input, which is common with macOS and Wacom tablets. Otherwise it is simulated from stroke velocity.
* **Linux file dialogs** need an XDG desktop portal. The headless CLI is unaffected.
* **PDF** text is outlined (not selectable).
* **Text** is Inter only, with no shaping (no ligatures, complex scripts or RTL) and no font picker. IME preedit is not displayed.
* **Rendering approximations.** Frame clipping is a rectangle, so rounded frames do not clip their corners. Overlay, dodge, burn, light, difference, exclusion and the HSL blend modes draw as Normal on the canvas (they are exact in SVG and PDF export). There is no layer or background blur yet.
* **Variables:** gradients keep fixed colors; there are no text styles and no component variants or properties.
* **Booleans are destructive:** the result is a new vector path with flattened curves.
* **`write_html`** ignores margin, tables and transforms (it reports them as `ignoredStyles`) and does not fetch remote images; pass a local path or a `data:` URI.
* **Agents:** one project is open at a time in the app, and `move_nodes` stays on one page. The in-app Chat mode runs Claude Code, Codex, ACP agents or your own Anthropic key. Agents that are not in Chat connect over MCP or the CLI.
* **Sharing** has no live presence (cursors, selections) yet.
* **Pen pressure** is simulated from stroke velocity on macOS tablets, because winit 0.30 does not expose it for mouse-like pen events.
* **Releases** cover macOS (Apple silicon) and Linux x86_64. Windows packaging scripts exist but are not part of releases.
* **PDF** text is outlined, not selectable.
## Project layout
```
src/geom.rs vectors, rects, camera
src/vector.rs bezier paths: flatten, hit test, SVG data, shapes, dashes
src/model/ Node / NodeKind / paints / Document arena
src/history.rs transactions, undo/redo
src/layout.rs auto layout, constraints, group bounds
src/ink.rs stroke smoothing, pressure, outline
src/text.rs rich text layout and glyph outlines
src/project/ project store, manifest/page formats, migrations
src/session.rs open project, autosave, thumbnails
src/editor/ tools, structure (groups/components), vector ops, pages, text editing
src/render/ draw ops → cached meshes → wgpu; headless capture
src/io/ PNG, SVG, PDF, export scopes, Excalidraw + SVG import, clipboard
src/mcp/ MCP server (rmcp): tools, HTML/CSS mapping, lint, HTTP service
src/ui/ home screen, pages, layers, inspector, palette
src/bin/ papercraft-cli (shell access) and papercraft-mcp (stdio bridge)
skills/ agent skills: papercraft, papercraft-design
analysis/ behaviour studies and design notes
docs/ guides and headless screenshots produced by `cargo test`
src/geom.rs vectors, rects, camera
src/vector.rs bezier paths: flatten, hit test, SVG data, shapes, dashes
src/model/ Node, paints, Document arena
src/history.rs transactions, undo and redo
src/layout.rs auto layout, constraints
src/text.rs, ink.rs rich text layout, stroke smoothing
src/project/ project store, manifest and page formats, migrations
src/session.rs open project, autosave, thumbnails
src/variables.rs collections, modes, groups, types, aliases, bindings
src/libraries.rs publish, enable and update shared libraries
src/design_system.rs design-system import and export
src/versions.rs saved versions
src/runs.rs agent runs, auto-versions, revert
src/sync.rs, merge.rs relay file sync and page merge
src/editor/ tools, structure, vector ops, pages, text editing, design bindings
src/render/ draw ops, cached meshes, wgpu, headless capture
src/io/ PNG, SVG, PDF, export, Figma, Excalidraw and SVG import
src/mcp/ tools, HTML and CSS mapping, lint, diff, codegen, HTTP server
src/cli.rs offline calls and the shell behind papercraft-cli
src/ui/ home, panels, inspector, palette, Variables, Assets, Libraries, agent view
src/lottie/ icon motion
src/web/ browser build
src/bin/ papercraft-cli, papercraft-mcp, papercraft-relay
skills/ agent skills
specs/ feature specs (agent runs, design libraries, offline CLI, ...)
analysis/ behaviour studies and design notes
docs/ guides and screenshots
```
## Downloads
| Build | File | Notes |
|---|---|---|
| Windows installer | `papercraft-<ver>-windows-<arch>.msi` | Per-machine installer (WiX) |
| Windows portable | `papercraft-<ver>-windows-<arch>-portable.zip` | `papercraft.exe` + CLI and MCP bridge |
| macOS app | `papercraft-<ver>-macos-<arch>.dmg` | PaperCraft.app, drag to Applications. Ad-hoc signed, not notarized |
| Command-line tools | `papercraft-cli-<ver>-<platform>-<arch>.zip` | `papercraft-cli` and `papercraft-mcp` |
Releases: https://git.marcospaulo.dev.br/masi/papercraft/releases. Other platforms: build from source.
## License and credits
PaperCraft is dual-licensed under [MIT](LICENSE-MIT) or [Apache-2.0](LICENSE-APACHE), at your option.
Dual-licensed under [MIT](LICENSE-MIT) or [Apache-2.0](LICENSE-APACHE), at your option.
Bundled fonts, icons and other assets keep their own open licenses; each one is listed with its author, source and license in [ATTRIBUTION.md](ATTRIBUTION.md). Inter (Regular, Medium, SemiBold, Bold and italics) is © The Inter Project Authors under the SIL Open Font License 1.1 (`assets/fonts/OFL.txt`). A few algorithms are ported from MIT-licensed projects (rough.js, hachure-fill, Excalidraw); they are listed with their notices in [THIRD_PARTY.md](THIRD_PARTY.md).
Bundled fonts, icons and other assets keep their own licenses, listed in [ATTRIBUTION.md](ATTRIBUTION.md); Inter is © The Inter Project Authors under the SIL Open Font License 1.1. Some algorithms are ported from MIT-licensed projects (rough.js, hachure-fill, Excalidraw), with their notices in [THIRD_PARTY.md](THIRD_PARTY.md).
The app icon is original artwork ([`assets/app-icon/`](assets/app-icon/README.md)).
PaperCraft started as a fork of [storytold/paper-rs](https://git.marcospaulo.dev.br/storytold/paper-rs); thanks to its contributors.
### Reverse-engineered origin
PaperCraft is an independent, clean-room-style reimplementation. It was reverse engineered from [Paper](https://paper.design) by studying the behavior of the Paper desktop app (`analysis/PAPER_ARCHITECTURE.md`) with [REA](https://github.com/morluto/rea) and Claude Code; Figma and Excalidraw were studied from their public docs and, for Excalidraw, its MIT source (`analysis/`). Only *behavior* was studied: no Paper or Figma code, shaders, icons, fonts or assets are used or committed. PaperCraft is not affiliated with, sponsored by or endorsed by Paper or Figma; those names are used only to describe the workflows it is compatible with.
<sub>Photoshop, Illustrator and Adobe are trademarks of Adobe Inc.; Figma is a trademark of Figma, Inc.; Paper is a product of its respective owners. PaperCraft is an independent, open-source project.</sub>
PaperCraft is not affiliated with Paper or Figma. Only the behavior of other tools was studied (see `analysis/`); no code, shaders, icons, fonts or assets from them are used.
+14 -6
View File
@@ -2,7 +2,7 @@
PaperCraft is an early alpha: a local-first infinite-canvas design app that agents can drive. This
file lists what is still missing, in priority order, with an honest status. Done items are checked
against `src/mcp/tools.rs` and the UI code (2026-10-12); rows 15, 23, 25, 32, 34, 39, 40, 45 and section 6 were updated 2026-10-21. Milestone history is in
against `src/mcp/tools.rs` and the UI code (2026-10-12); rows 7, 8, 12, 15, 23, 25, 32, 34, 39, 40, 44, 45, 46 and section 6 were updated 2026-10-21; rows 15, 47 and 48 on 2026-10-22. Milestone history is in
[PROGRESS.md](PROGRESS.md); known rendering and import limits are in the README.
Status: **done** (works today), **partial** (some of it works), **todo**.
@@ -19,12 +19,12 @@ Agents can already build a design system through the tools; people cannot yet ma
| 4 | Lint auto-fix | **done** | `lint_design {fix: true}` and UI `Fix` / `Fix all`: snaps spacing to 4px grid, snaps type scale, enforces 44px targets, links matching colors to variables. |
| 5 | Lint in the UI | **done** | Live Lint section in Design tab; click issue to select & zoom, or click `Fix` / `Fix all`. |
| 6 | Variable modes | **done** | Mode selector + create/delete modes in Design tab and via `set_variables {mode}` / `set_variable_mode`. |
| 7 | Number variables (spacing, radius, font size) | partial | Non-color tokens (`--spacing-md`) editable in Design tab and substituted in CSS; typed per-field bindings todo. |
| 8 | Stroke and gradient variables | todo | Strokes and gradients keep fixed colors. |
| 7 | Number variables (spacing, radius, font size) | **done** | Typed number, string and boolean variables in collections with groups and aliases; fields bind (size, gap, padding, radius, font size, line height, opacity, visible) in the inspector and `bind_variable`. |
| 8 | Stroke and gradient variables | partial | Strokes and text color bind to variables. Gradients keep fixed colors. |
| 9 | Text styles | todo | Named type styles (Heading / L, Body / M) that update every text layer using them. |
| 10 | Component variants and properties | todo | Variants are separate components named `Button / Primary`. No variant sets, boolean or text properties. |
| 11 | Swap instance, detach by tool | **done** | `swap_instance` and `detach_instance` MCP tools + UI controls in Design tab and Inspector. |
| 12 | Cross-page and shared libraries | todo | Components and instances must live on one page. |
| 12 | Cross-page and shared libraries | **done** | Instances of a main on any page; publish a project as a library, enable, update and disable it in other projects (Libraries modal, `*_library` tools). |
| 13 | Export design tokens | **done** | `get_variables` with `format: "css"`, `"json"` (W3C DTCG + modes), or `"tailwind"` (`@theme`), plus Copy CSS / Copy JSON in Design tab. |
| 14 | Apply a design system to existing work | partial | `lint_design {fix: true}` links matching literal colors to variables and snaps spacing/type scale. |
@@ -32,7 +32,7 @@ Agents can already build a design system through the tools; people cannot yet ma
| # | Item | Status | Notes |
|---|---|---|---|
| 15 | MCP and CLI tool surface | **done** | 53 tools, one undo step per call, `papercraft-cli list / schema / call`. |
| 15 | MCP and CLI tool surface | **done** | 67 tools, one undo step per call, `papercraft-cli list / schema / call`. |
| 16 | Agent skills | **done** | `skills/papercraft` and `skills/papercraft-design`. |
| 17 | Accessibility annotations | todo | Reading order, roles and alt text on layers, checked by the linter. |
| 18 | Code export from frames | **done** | `get_jsx` supports `format: "inline"`, `"tailwind"` (Tailwind utility classes), and `"html"` (HTML + CSS rules with `:root` variables). |
@@ -40,6 +40,7 @@ Agents can already build a design system through the tools; people cannot yet ma
| 20 | Screenshot diffing | **done** | `diff_frames` tool (`src/mcp/diff.rs`) for structural/property frame diffing + `diff_rgba` pixel diffing with highlight PNG. |
| 21 | Moving nodes between pages | todo | `move_nodes` stays on one page. |
| 22 | Remote images in `write_html` | todo | Only local paths and `data:` URIs. |
| 46 | Design from the CLI without the app | **done** | `papercraft-cli call --offline` and `shell` run the tools in-process on the project store; screenshots use a GPU or the software adapter. |
## 3. Design features
@@ -83,5 +84,12 @@ Spec: [specs/agent-runs/spec.md](specs/agent-runs/spec.md), tasks: [specs/agent-
| 41 | Agent presence on the canvas | todo | Outline the node a tool call touches, label it, pause or stop the run. |
| 42 | `get_context` tool | todo | Selection, variables, nearby components and lint summary in one call, so an agent orients in one round trip. |
| 43 | Comments assigned to agents | todo | `@agent` in a thread triggers an edit and a reply. Needs threaded comments. |
| 44 | In-app prompt bar | todo | Run a prompt on the selection through the user's own key or local CLI. Largest scope: provider config, key storage, cost. |
| 44 | In-app prompt bar | **done** | Chat mode: Claude Code, Codex or your own Anthropic key; see `docs/chat.md`. |
| 45 | Correct tool annotations | **done** | `lint_design` no longer sends `readOnlyHint`; `fix: true` edits are classified. |
## 7. Annotations and chat agents
| # | Item | Status | Notes |
|---|---|---|---|
| 47 | Design annotations | **done** | Notes with leader lines and categories, templates per project and page, view modes (⌘⇧A), Annotate tool (N), side view, inspector section, six MCP tools; see `docs/annotations.md`. |
| 48 | ACP agents in Chat | **done** | Any ACP agent on the PATH (OpenCode works; Gemini CLI refuses ACP clients for now; Cursor needs `cursor-agent login`), npx agents after enabling, custom agents; see `docs/chat.md`. |
+2 -2
View File
@@ -6,7 +6,7 @@ FROM rust:slim AS build
# Must match the wasm-bindgen crate in Cargo.lock.
ARG WASM_BINDGEN=0.2.129
RUN rustup target add wasm32-unknown-unknown \
&& apt-get update && apt-get install -y --no-install-recommends binaryen pkg-config libssl-dev \
&& apt-get update && apt-get install -y --no-install-recommends binaryen pkg-config libssl-dev libdbus-1-dev \
&& rm -rf /var/lib/apt/lists/* \
&& cargo install wasm-bindgen-cli --version ${WASM_BINDGEN} --locked
COPY --from=vendor crates /vendor
@@ -21,7 +21,7 @@ COPY . .
RUN sh web/build.sh && cargo build --release --locked --bin papercraft-relay
FROM debian:stable-slim
RUN apt-get update && apt-get install -y --no-install-recommends libssl3 ca-certificates \
RUN apt-get update && apt-get install -y --no-install-recommends libssl3 libdbus-1-3 ca-certificates \
&& rm -rf /var/lib/apt/lists/* \
&& useradd --system --uid 10001 papercraft
COPY --from=build /src/target/release/papercraft-relay /usr/local/bin/papercraft-relay
+60 -3
View File
@@ -1,12 +1,14 @@
# Driving PaperCraft with agents
PaperCraft exposes one set of 53 tools three ways. They all run the same code inside the app, so an agent sees what you see and every call is one undo step.
PaperCraft exposes one set of 70 tools three ways. They all run the same code inside the app, so an agent sees what you see and every call is one undo step.
| Way | Use it when | Needs the app running |
|---|---|---|
| MCP over HTTP, `http://127.0.0.1:29980/mcp` | the agent client speaks MCP (Claude Code, Codex, pi) | yes |
| MCP over stdio, `papercraft-mcp` | the client only starts stdio servers | for calls; `tools/list` works offline |
| Shell, `papercraft-cli` | the agent has a terminal and you want no tool schemas in its context | for `call`; `list`, `schema` and `icons` work offline |
| Shell, `papercraft-cli` | the agent has a terminal and you want no tool schemas in its context | for `call`; `list`, `schema` and `icons` work offline (with the app running, `list` and `schema` show the app's tools) |
If you would rather talk to the agent inside the app, Chat mode (⌘J, or `Design | Chat` in the top bar) is the in-app alternative. It runs Claude Code or Codex through their CLIs against the same MCP server, ACP agents such as OpenCode or Gemini CLI, or the Anthropic API with your own key, and keeps the conversation next to the canvas, with the same runs, review and revert. The setup and the thread are in [chat.md](chat.md). The rest of this guide covers driving the app from your own terminal or agent client.
## Install
@@ -75,6 +77,61 @@ papercraft-cli call finish_working_on_nodes '{"nodeIds":["abc123:1"]}'
Pass JSON inline, or `-` to read it from stdin (best for HTML, which is full of quotes; `jq -Rs` can wrap a file into the right JSON). Text results go to stdout. Images are saved to `--out` (default `<tool>.png`) and the path is printed.
## Without the app
`papercraft-cli` also works with PaperCraft closed (a server, CI, a headless box). When nothing answers on the port, or with `--offline`, tools run inside the CLI on the project store (`$PAPERCRAFT_HOME`, else the default folder) and every editing call is saved. Projects made this way open normally in the app.
```sh
papercraft-cli call create_file '{"name":"Demo"}' # -> fileId
papercraft-cli call create_artboard '{"name":"Card"}' --project Demo
papercraft-cli call get_screenshot '{"nodeId":"abc123:1"}' --project Demo -o card.png
```
`--project <name|id|path>` opens that project first; without it the most recently modified one is used. With the app open on a project, plain `call` goes to the app, and `--offline` on that same project is refused ("PaperCraft has this project open") so two writers never share a folder. Screenshots need a GPU adapter; with none, the software adapter is tried, and if that fails the image tools return an error while all other tools work.
### Shell and scripts
When `call` or `shell` reaches the app and the app is another version, the CLI prints once on stderr, for example `papercraft-cli 0.6.1 ≠ app 0.6.2; reinstall the CLI`. `list` and `schema` read the running app's tool list, so tools newer than the CLI still show; with the app closed they use the CLI's built-in list.
`papercraft-cli shell [--project X] [--offline]` keeps one session open (offline, one in-process project; otherwise the app). A line is `<tool> <json>` (JSON may span lines until its braces close) or a command: `:help :tools :schema <tool> :open <project> :pages :page <name|id> :shot [nodeId] [file] :undo :redo :save :watch on|off :quit`. `:watch on` renders the artboard last edited to `preview.png` after each editing call, shown inline on iTerm2, WezTerm and kitty. Input is plain stdin (no line editing or history; use `rlwrap` for that). Piped input prints no prompt and exits 1 if any line failed, listing the line numbers on stderr.
```sh
papercraft-cli shell --offline --project Demo <<'EOF'
# build a card
create_artboard {"name":"Card","styles":{"width":"320px","height":"180px","backgroundColor":"#1e1e2e"}}
write_html {
"targetNodeId": "abc123:1",
"mode": "insert-children",
"html": "<div style='font-size:28px;color:#cdd6f4'>Hello</div>"
}
:shot abc123:1 card.png
EOF
```
## Design-system tools
* Variables: `get_variables` and `set_variables` take collections, groups (`color/brand/primary`), types (`color`, `number`, `string`, `boolean`), `mode`, `alias`, `description` and `hidden`; the old `{"name":"#hex"}` call still works and lands in the first collection. `create_collection` makes a collection with modes, `delete_variables` removes by name (refuses aliased ones unless `force`), `bind_variable` binds or detaches a field of layers (`stroke`, `text-color`, `width`, `height`, `gap`, `padding`, `radius`, `font-size`, `line-height`, `opacity`, `visible`).
* Components: `get_components` lists mains of every page and enabled library with a `componentKey`; `create_instance` and `swap_instance` accept a main from any page or library (`componentId` or `componentKey`).
* Libraries: `publish_library`, `list_libraries`, `enable_library`, `update_library`, `disable_library`. They work offline too, on the project store.
## Seeing what the user sees
* `get_basic_info` and `get_selection` include `viewport: {pageId, rect: [x, y, w, h], zoom}`: the page the user is viewing and the world rect on screen.
* `set_viewport {pageId?, nodeIds? | rect?, zoom?, padding?, force?}` switches the user's page (as the page list does) and fits the nodes or rect, or centres them at an explicit `zoom` (0.01 to 256; `select_nodes {zoom: true}` stops at 100%). While the user is panning or zooming (10 s after their last camera move) it is refused with "user is moving the canvas", unless `force: true`.
* `find_nodes {textValue}` finds text layers containing the phrase on every page (or `pageId`), ignoring case and line breaks; `*` wildcards match the whole value instead. `get_tree_summary {nodeId, fullText: true}` prints every text layer's complete text, for copy review across screens.
* `get_screenshot {nodeId, annotations: true}` draws the notes on the captured layers (cards, number badges, leader lines), so an agent can check note placement.
## Annotation tools
* `annotate {pageId?, notes: [{node, text, type?}]}` adds many notes in one undo step. `node` is a node id or an exact layer name; the first line of `text` is the label and the rest the body; `type` is a category key (default `rule`) that the page's template must enable. Placement is automatic. `annotate {tidy: true, frame?}` with no notes re-lays-out the existing notes and returns `{"tidied": n}`, the number of notes it moved.
* `get_annotation_template {pageId?}` returns the allowed types with their guidance and fields. Call it once before `annotate`.
* `set_annotation_template {template, scope?: "page" | "project", pageId?}` switches the template by id or name.
* `upsert_annotation_template {template: {id?, name, display?, categories: [{key, enabled?, guidance?, fields?}]}, categories?: [{key, name, color, icon}], setAs?: "project" | "page", pageId?}` creates or replaces a template and its category styles in one undo step. `delete_annotation_template {template}` removes one (the last stays).
* `get_annotations {nodeId?, pageId?, full?}` reads notes as `[number, node, type, text]` rows.
* `update_annotation {id | ref, text?, type?}` and `delete_annotations {ids}` take ids or references such as `Sign in #3`.
See [annotations.md](annotations.md) for categories, templates and what the notes look like.
## Safety
The server listens on loopback only, rejects requests that carry an `Origin` header (browsers) and foreign `Host` headers. Anything on your machine that can reach `127.0.0.1:29980` can edit the open project, so do not forward the port. Undo (⌘Z, or the `undo` tool) reverts any agent edit.
@@ -88,6 +145,6 @@ The Agent view lists runs and lets you review changes, revert a whole run, undo
## Reference
* [Tool reference](../skills/papercraft/references/tools.md), generated from `papercraft-cli schema`.
* [Design systems](design-system.md): variables, components, icons, lint.
* [Design systems](design-system.md): collections, variables and bindings, components, libraries, icons, lint.
* [Design-system packages](design-system-packages.md): importing and exporting an OpenDesign package.
* `papercraft-cli --help`-style usage: run `papercraft-cli` with no arguments.
+148
View File
@@ -0,0 +1,148 @@
# Annotations
An annotation is a note that explains a design in place: a business rule, a behaviour, where the data comes from, an accessibility gap. Each note is a small card with a number, a category, a label and an optional body, joined to its layer by a leader line. Teams use them for review and handoff, and turn them off for presenting.
Annotations live on a page and are saved with it (the `annotations` list in the page file). Pages without any load and save exactly as before. Categories and templates are project-wide and live in `design.json`.
## Categories
Every note has one category. The category is the only thing that sets how a note looks: its icon, colour and badge come from the category, and a note stores none of them. Change a category's colour or icon and every note in it changes.
Each category has a short type key. Agents and the Annotate popover use the key; the UI shows the name.
| Key | Name | Icon | Colour | Use for |
|---|---|---|---|---|
| `rule` | Business rule | scale | violet `#7c5cff` | the rule or constraint the part enforces |
| `behaviour` | Behaviour | zap | blue `#2f80ed` | states, transitions, edge cases |
| `content` | Content | type | green `#1fa87a` | copy, tone, length |
| `data` | Data | database | amber `#e08a1e` | where a value comes from |
| `a11y` | Accessibility | accessibility | pink `#d94f8a` | focus, labels, contrast, reading order |
| `dev` | Dev note | code | grey `#6b7280` | implementation notes for engineers |
You can add categories, rename them, change their key, colour and icon, and write guidance for each one in the Customize modal. A custom category gets a key too.
## Templates
A template says which kinds of notes a page wants, and what each note should contain. The project has a default template; a page can use its own instead.
Built-in templates are editable copies, not locked. Each category in a template has enabled or not, guidance (a short prompt for what the note should say) and optional fields (structured lines such as `Owner`).
| Template | Categories | Fields |
|---|---|---|
| Product spec | rule, behaviour, content, data | none |
| Dev handoff | behaviour, data, dev, a11y | none |
| Accessibility review | a11y | Issue, WCAG, Fix |
| Content review | content | Tone, Max length |
| Minimal | rule | none |
Pick the project default or "This page" from the template chips at the top of the Annotations side view. Built-ins can be reset; custom templates can be deleted. Duplicate copies any template so you can change it.
**Customize…** (side view) opens the template editor: name, display (full notes or badges), the enabled categories, the guidance and fields of each. Changes to categories apply to the whole project.
The Annotate popover offers only the enabled categories of the active template, and shows each field as a labelled line. A field is stored as a `Name: value` line at the top of the note's body. Agents get the same rule: `annotate` refuses a type the template disables and lists the allowed keys.
## View modes
Three levels, all view state. They are not saved in the design and not undoable.
* **Full**: every note shows its label and the first lines of its body. Below 60% zoom notes show as badges, so cards never spill over the design; zoom in to read them.
* **Badges**: only the number badges are shown.
* **Hidden**: nothing is drawn.
`⌘⇧A` (View → Annotations) cycles Full → Badges → Hidden → Full. The starting mode follows the template's display setting until you change it.
Two finer controls:
* **Per note**: collapse a note to its number badge; click the badge to expand it again.
* **Per category**: show or hide a category from the category filter in the side view.
Annotations are drawn as an overlay on the canvas only. Exports (PNG, SVG, PDF) and Present mode never include them. There is no option to include them in an export yet.
## Annotate tool
Press `N` for the Annotate tool, then click a layer. The New annotation popover opens beside it with:
* Category, from the template's enabled categories.
* Label, up to 40 characters. The popover shows the count.
* The template's fields, if any.
* A note, in Markdown.
Save creates the note with its leader line to the layer's side; Cancel discards it. You can also select layers, right-click, and choose **Annotate**.
Each note's leader line starts at the note card and ends at the anchor on the target. The card and the anchor are stored relative to the target, so moving or resizing the layer keeps the note attached. Drag a card to move it; the line re-routes.
If the target is deleted, the note stays where it was in the side view's **Detached** group, with a warning badge.
## Annotations side view
The side view lists the page's notes:
* Grouped by top-level frame, plus **Page** (notes on no frame) and **Detached**.
* Each row shows the number, the category chip and the label. Click a row to select the layer and zoom to it.
* The category filter shows or hides categories.
* Edit a note inline, or delete it. Edits are one undo step each.
* **Add annotation** opens the popover for the current selection.
* **Annotate with AI** puts a prompt in the Chat composer, unsent, with the selected frame (or the page) as a chip. The prompt asks the agent to read the template with `get_annotation_template` and add all the notes in one `annotate` call. It needs a saved project and Chat mode.
Numbers run per frame in reading order (top to bottom, then left to right), so a frame reads 1, 2, 3. Notes on no frame are numbered after that, from 1.
## Inspector
When a single layer is selected, the inspector has an Annotations section. It lists that layer's notes, with edit and delete, and an Add annotation button. The note's anchor is one of the four sides of the target (Top, Right, Bottom, Left) with a position along it.
## Agents
Agents work with notes through six MCP tools, all in `src/mcp/tools.rs`. They are one undo step per call and appear in `edits_doc`, so a run that only adds notes still gets a Review card (a "Notes" group, counted as added, changed or removed), and Revert removes them.
| Tool | What it does |
|---|---|
| `get_annotation_template` | Reads the template: `[type key, guidance, field names]` for each enabled type. Call it once before `annotate`. |
| `set_annotation_template` | Switches the template by id or name, for one page (default) or the project (`scope: "project"`). |
| `upsert_annotation_template` | Creates or replaces a template, and creates or restyles categories in the same call (`categories: [{key, name, color, icon}]`). `setAs: "project"` or `"page"` makes it the default or the page override. Returns `{id, name, types}`. |
| `delete_annotation_template` | Deletes a template by id or name. The last template stays. |
| `annotate` | Adds many notes at once. Each note names a node id or an exact layer name on the page, a `text` and a `type` (default `rule`). |
| `get_annotations` | Reads notes as `[number, nodeName, type, text]` rows (text capped at 120 characters). `full: true` returns complete objects; `nodeId` limits to a subtree; `pageId` picks another page. |
| `update_annotation` | Changes the text or type of one note, by `id` or by reference such as `Sign in #3`. |
| `delete_annotations` | Deletes notes by ids or references such as `Sign in #3`. |
Custom template with a new category, used on the current page:
```json
{
"template": {"name": "Legal review", "categories": [
{"key": "legal", "guidance": "Legal risk this part carries.", "fields": ["Owner", "Law"]},
{"key": "rule"}]},
"categories": [{"key": "legal", "name": "Legal", "color": "#aa3355", "icon": "scale"}],
"setAs": "page"
}
```
`icon` must be one of the built-in icon names (an unknown name lists them). Every key in the template must exist, either already or in `categories`. The template and category edit is one undo step; `setAs: "page"` adds a second.
For `annotate` and `update_annotation`, the first line of `text` is the label and the rest is the body. There are no positions, icons or colours: PaperCraft places each note beside its target, outside the frame, stacked so none overlap. `annotate` is all or nothing: if one note is refused (an unknown layer, or a type the template disables), none is added and the error lists the allowed keys.
Batched call, on a page whose template is Product spec:
```json
{
"notes": [
{"node": "Sign in", "type": "rule", "text": "Lock after 5 failed tries\nLocks for 15 minutes, then resets."},
{"node": "Email field", "type": "data", "text": "Source: users.email\nValidated on blur"},
{"node": "Submit", "type": "behaviour", "text": "Disabled until both fields are valid\nSpinner while the request runs"}
]
}
```
The reply is one row per note, `[number, node, type, label]`. Then `get_annotations {}` reads them back, and `delete_annotations {"ids":["Sign in #3"]}` removes one by its frame reference.
`annotate {"tidy": true}` with no notes re-runs placement for every note on the page (or on `frame`) in one undo step and returns `{"tidied": n}`, the number of notes it moved; `0` means the layout was already tidy.
To see the notes, `get_screenshot {"nodeId": "<frame>", "annotations": true}` draws the cards, number badges and leader lines of the notes whose target is inside the captured layers, placed and routed as on the canvas (full cards, scale 1). The image grows to include the cards. Without `annotations`, or with `false`, the screenshot is the same as before.
**Handoff.** `get_design_spec` and the code exports (`get_jsx`) include the notes of the frame as comments. Each note is one line, `// 1 Business rule: Lock after 5 failed tries`, with its body lines as more `//` lines, so code generated from a frame carries the rules next to the markup.
## Storage
* The page file has an `annotations` list. Each note holds its target (or a point, when it has none), its anchor, label, body, category, position, author (`user` or `agent`) and creation time. A note whose target is gone is marked `detached`.
* `design.json` holds the categories and the templates, with the project default. A page may name its own template.
* Old projects load unchanged. A page without annotations saves byte-identical to before.
+176
View File
@@ -0,0 +1,176 @@
# Chat mode
Chat mode puts a conversation with an agent next to the canvas. Press ⌘J, or use the `Design | Chat` switch in the top bar, to turn it on. The chat column sits on the left (420 to 640 px, 480 by default, resizable) and the live canvas fills the rest. The layers and inspector are hidden; the inspector can be opened as a narrow overlay on the canvas's right edge. Design mode works as before, and a chat keeps running in the background when you switch back.
The mode is remembered per project. Entering a project that was last left in Chat mode opens in Chat mode and shows its newest chat.
Chat mode is native only. The web build shows the switch disabled with a note.
## Backends
Chat drives the same tools as an agent connected over MCP, so the edits, runs, undo and revert behave the same whichever backend you use. There are three ways in: two CLIs that PaperCraft talks to directly, any agent that speaks ACP, and API endpoints.
**Claude Code** runs `claude -p` with streaming JSON in and out. PaperCraft writes an MCP config that points the CLI at the app's own server on `127.0.0.1`, allows the `mcp__papercraft__*` tools, and passes `--strict-mcp-config`, so the CLI sees only PaperCraft's server. The PaperCraft skill text goes in through `--append-system-prompt-file`. The working directory is the project folder. Follow-up messages resume the CLI session by its id, so the agent keeps its context.
**Codex** runs `codex exec --json` in the project folder. The PaperCraft server is added with a `-c mcp_servers.papercraft.url=...` override, and its tools are pre-approved (`default_tools_approval_mode="approve"`), so Codex does not stop to ask for each one. The PaperCraft instructions are prepended to the first prompt of a chat; resumed sessions do not repeat them. Follow-ups resume the Codex session the same way.
**ACP agents** run any agent that speaks the Agent Client Protocol (https://agentclientprotocol.com) over stdio. PaperCraft starts the agent once per turn, sends `initialize` and `session/new` with the project folder as the working directory, and passes PaperCraft's MCP server: over HTTP when the agent supports it, otherwise through the bundled `papercraft-mcp` stdio bridge. The prompt goes out as `session/prompt`, and the agent's streamed updates become the same thread as the other backends: text, thinking, tool cards and the plan. Stop sends `session/cancel`. Follow-ups resume with `session/load` when the agent supports it. ACP has no system prompt field, so the PaperCraft instructions go in front of the first prompt.
The ACP agents PaperCraft knows about, and what was checked on the development Mac:
* **OpenCode** (`opencode acp`): works.
* **Gemini CLI** (`gemini --acp`): found and started, but its server currently refuses ACP clients, so turns fail with the agent's error until Google changes that.
* **Cursor** (`cursor-agent acp`): sign in first with `cursor-agent login`.
* **Pi** (`pi-acp`, an adapter run through `npx`): enable it once in the agent panel or Settings, then it works like the others.
* **Goose, Kimi, Devin, Junie, Mistral Vibe, Hermes, OpenHands, Stakpak, VT Code, Poolside, Droid**: started with the command their own docs give. They are not all verified here.
* **Claude Code and Codex ACP adapters** (`npx`): listed under Enable via npx. Claude Code and Codex themselves use the direct backends above.
Agents that run through `npx` are off until you enable them, because enabling runs code that npx fetches from npm.
ACP permissions: PaperCraft's own tools run without asking, except the destructive ones listed under Approval below. Any other tool the agent asks to run (its own shell or file tools, for example) shows an approval card with Approve or Deny in the thread, and Deny is sent back to the agent.
**Custom agents** are your own ACP agents: a name, a command (a program name on the resolved `PATH`, or a full path) and arguments. The arguments are split on spaces, with no quoting. Custom agents appear under Custom in the agent panel and in Settings → Chat.
**API endpoints** call a model over HTTPS with your own key. Settings → Chat holds a list of endpoints, each with a name, a format, a base URL, a model and an optional key. The app's tool list is sent as the API tools, and every tool call runs through the same code path as an MCP call on the UI thread. The loop continues until the model ends its turn, for up to 40 tool rounds per message.
* **Format**: `Anthropic` is the Messages API (`POST {base}/v1/messages`, `x-api-key`). `OpenAI` is Chat Completions (`POST {base}/chat/completions`, `Authorization: Bearer`, streaming `choices[].delta`, tools as `{"type":"function",...}`, tool results as `tool` messages). Both give the same thread: text, tool cards, approvals, Stop, the usage line.
* **Base URL and model** are free text, for example `https://api.anthropic.com`, any Anthropic-compatible URL, or `http://127.0.0.1:11434/v1`. The key is optional, so local servers need none.
* A default endpoint named `Anthropic` (`https://api.anthropic.com`, `claude-opus-5-5`) exists from the start, so the first run needs only a key.
* The agent panel lists Detected agents, API endpoints and Custom agents (see Setup). Each chat remembers its backend.
* **Claude-only fields** (effort, the thinking summary, the refusal fallback and its beta header, eager tool-input streaming, prompt-cache breakpoints) are sent only when the base URL host is `api.anthropic.com`. For that host the model menu offers `claude-opus-5-5`, `claude-sonnet-5-5` and `claude-haiku-5-5`, effort is `medium` by default (`low` and `high` in the menu), and the Thinking row shows the summary. Every other endpoint gets a plain request. Missing `usage`, thinking or cache fields in the reply are fine.
* **OpenAI format and images**: attached images are sent as `image_url` data URIs. A tool message in this format carries text only, so a tool result with an image (such as `get_screenshot`) goes back as the text `[image omitted]`, and the image follows as an extra user message in the same round.
* **Usage line**: input, output and cached tokens, as the server reports them; nothing when it reports none. A cost estimate shows only for the Claude models in the small price table in `src/chat/endpoint.rs`. It is not a bill.
* `ANTHROPIC_API_KEY` in the environment is used for `api.anthropic.com` when no key is stored. `PAPERCRAFT_ANTHROPIC_BASE_URL` points Anthropic-format requests at another URL (for tests and proxies).
## Setup
### Finding agents
Chat finds agents the way your terminal does. At startup PaperCraft reads your login shell's `PATH` once, off the UI thread (`$SHELL -l`, 3 s limit), and merges it with the app's own `PATH` and the usual folders (`~/.local/bin`, `/opt/homebrew/bin`, `/usr/local/bin`, `~/.cargo/bin`, `~/.bun/bin`, `~/.npm-global/bin`, Volta and nvm). Detection and the agent processes both use that merged `PATH`. This is why an agent installed under `~/.local/bin` or Homebrew is found even when PaperCraft was opened from the Dock.
A row shows a version when the agent reports one. A program with the right name that is not the agent (for example the `goose` database migration tool, which shares its name with Block's Goose agent) shows `Wrong program` with its path, not a false Ready.
PaperCraft never shows install commands. An agent that is not found shows `Not found`, with `Set path…` (opens Settings) and `Docs` (the agent's own documentation). Install the agent with its own installer, then press Detect again.
### Agent panel
Click the agent chip in the chat header. The panel opens over the chat column with a shadow and a dimmed backdrop, sized like the column. It has a search field (name or id), and these sections:
* **Detected**: agents found on your `PATH`, with the version and path. Click one to use it for this chat.
* **Enable via npx**: agents that start through `npx` (Pi, Qwen Code, Kilo, Cline, Auggie, Copilot CLI, Qoder, CodeBuddy and the Claude Code and Codex ACP adapters). Each row has an `Enable` chip. The section says that it runs code fetched by npx.
* **Not found**: registry agents that are not on this computer, folded by default.
* **API endpoints**: your endpoints, with an `Add` action that opens Settings.
* **Custom**: `Add custom agent` opens Settings.
Each row has a status chip: `Ready`, `Enable`, `Not found`, `Wrong program`, `No key` (an endpoint without a key) or `Set up` (an endpoint without a URL or model). Arrow keys move through the rows, Enter picks one, Escape closes the panel.
Settings → Chat has the same list, so an agent can also be hidden from the panel there (the `Show in the chat agent picker` switch on its row).
### Setup card
A chat with no backend chosen shows one card, "Connect an agent". It lists the agents detected on this computer, up to four, with `Show all agents` for the rest. Below them are `Add an API endpoint` and `Add custom agent`. The card never lists install steps.
### Sign-in
When an agent says it needs you to sign in (ACP's "Authentication required" and similar messages), the failed turn shows "<Agent> needs you to sign in" with the command from the agent's docs, then Retry. For Cursor that is `cursor-agent login`, for OpenCode `opencode auth login`, for Codex `codex login`, for Claude Code's ACP adapter `claude /login`. For agents without a known command the card says to sign in with the agent's own app and retry. Chat does not sign in for you.
### Settings → Chat
The page scrolls and keeps one grid for its labels. Its sections:
* **Agents**: one row per agent, with its status, version and path. A details disclosure holds the **Path override** (for a binary that is not on `PATH`, or a specific install; empty means the first match on the merged `PATH`), the **Arguments override** (replaces the registry's ACP arguments, for example `--acp --debug`), and for npx agents the **Enable** button. The **Show in the chat agent picker** switch hides an agent from the panel. Custom agents have Name, Command and Arguments fields and a Remove button. `Detect again` re-runs detection.
* **API endpoints**: add, edit and remove endpoints (name, format, base URL, model) and set the default one. Each has a key field with Save and Remove. Keys are stored in the macOS Keychain, Windows Credential Manager or the Linux Secret Service, under the service name `PaperCraft` and the user `api-key:<base URL>`. An older single key (`anthropic-api-key`) is still read for `api.anthropic.com` and moves to the new entry the next time you save it. Removing a key makes that endpoint stop until a key is saved again (for `api.anthropic.com`; other endpoints work without one).
* **Defaults for new chats**: the backend, the endpoint, and the effort for `api.anthropic.com`.
Settings from before endpoints existed (`api_model`) move into the default endpoint on first load. The `claude_path` and `codex_path` settings from earlier versions still win for their agent until you save the Agents list. These defaults, the agent settings and the endpoint list (never the keys) are saved in `chat_settings.json` in your config folder (`~/Library/Application Support/papercraft/` on macOS). They are not part of any project.
## The thread
The header has the chat title (rename), the chat list (new chat, switch, delete), the agent chip (for example `Claude Code · Opus 5.5`) and the context meter. The meter shows the tokens in the context at the last model call against a 200k window, and turns amber past 75%. It is hidden for Codex, which reports no per-call usage.
Replies are markdown: paragraphs, lists, code blocks with a copy button, inline code and links. While a turn runs, the reply streams in.
* **Thinking**: when the backend reports reasoning, a row shows "Thinking…" while it runs and collapses to a summary when it ends. Expand it to read the text.
* **Tool cards**: one card per tool call with the verb and target (for example "Drawing layout · Card"), a spinner while it runs, and a failed state with the error. Args and result are collapsible. `get_screenshot` results show a thumbnail.
* **Step groups**: consecutive tool calls in one reply fold into one line ("Built the card · 5 steps") that expands to the cards.
* **Plan**: when the agent keeps a todo list (Claude Code's `TodoWrite`, or an ACP plan), the latest list is pinned above the composer with a "done of total" count.
* **Approval**: on the API backend and for ACP agents, the destructive tools (`delete_pages`, `disable_library`, `import_design_system`, and `delete_nodes` on more than 20 layers) wait for Approve or Deny before they run. Deny returns an error to the model, which can then carry on. For ACP agents, any non-PaperCraft tool the agent asks for shows the same card. The Claude Code and Codex CLIs do not show this card. They use the CLI's own permission rules, and in non-interactive mode a tool that needs permission is denied. The papercraft tools are pre-allowed on both CLIs.
* **Checkpoint**: when an agent run starts, the thread shows "Checkpoint · before run N". "Restore to here" reverts that run and every run after it, through the same revert as the Agent view.
* **Run card**: when a run ends, "Agent finished, N changes" with Review, Revert and Accept. These are the same actions as the run review on the canvas. The card names the client that made the run ("Chat", "Claude Code · 2") and refreshes after an undo.
* **Progress**: while a run is open, the step group and the Working pill count calls and touched layers ("Styling · 212 calls · 1,340 changes"). The pill clears when the turn ends.
* **Errors**: a failed turn shows a red row with Retry. A sign-in problem shows the sign-in card (see Setup).
* **Canvas follow**: when a tool call targets a node, the canvas pans to it, unless you moved the camera in the last 10 seconds.
* **Agent presence**: after each agent call, the layers it pointed at or changed get an accent outline that fades over 3 seconds, and the newest carries a label with the verb and the client ("Styling · Claude Code"). This works for chat turns and for any MCP client. When the agent works on another page, a chip "Agent on page X →" switches to it.
## Design-system context
Every turn carries a summary of the project's design system, so the agent reuses what exists instead of drawing look-alikes:
* variables by collection and group with their modes (colors as `name=#light/#dark`), tokens as scales;
* main components on every page and in enabled libraries, as `componentKey · name · w×h · uses`, most used first;
* enabled libraries and their update status, and the page's annotation template;
* a reuse rule: place components with `create_instance` / `swap_instance`, colors as `var(--…)`, spacing on tokens.
The summary is capped at about 1,500 tokens. A large system keeps its most used components and collapses variable groups to counts, with a pointer to `get_components` / `get_variables` for the rest. It is rebuilt only when the design system changes. The API backends get it as a separate system block (cached on `api.anthropic.com`); CLI and ACP agents get it in their first prompt, and again as `[Design system changed] …` on the next message after a change. The context meter includes it. Turn it off in Settings → Chat → **Send design-system summary**.
`lint_design` has a matching rule, `not-an-instance`: a frame built by hand that matches a component (same structure, size within 4 px, same fill, radius and stroke) is flagged with the component to use.
## Pointing at the canvas
* **Pick**: the Pick chip next to `@ Selection` turns the canvas into a picker without changing your selection. Click a layer to add it, or Shift+drag an area; Esc cancels. Each pick types `@Name` at the composer cursor and adds a chip.
* **⌥-click**: in Chat mode, ⌥-click a layer on the canvas to add it the same way.
* **Area chips** are sent as `[Area] page P, rect x,y,w,h, contains: <ids…>` (the top layers wholly inside the area, up to 40).
* **Crops**: layer, area and `@ Selection` chips carry an image of that part of the page with its notes drawn (1024 px max). The API backend gets it as an image block; CLI and ACP agents get a file under `.papercraft-chat-tmp/`.
* **Ask (⌘K)**: with a selection, ⌘K opens a prompt box anchored above it. Enter sends to the chat with the selection chip and its crop, and the reply streams in the chat column without leaving Design mode. With nothing selected, ⌘K opens the command palette (also ⌘⇧/).
## Actions on a selection
The **Actions** menu opens from the canvas right-click menu, from the Actions chip in the composer and from the command palette ("Actions: …"). It works in Design and Chat modes.
Instant actions run in the app with no model. Each one is a single undo step and its own run (client "Actions"), and a toast reports what it did with Review and Revert:
* **Fix lint here**: `lint_design {fix: true}` on the selection.
* **Bind to tokens**: binds hard-coded colors to the nearest variable (within 12 RGB) and gaps, padding and radii to the nearest spacing or radius token (within 2 px). Values with no close match are listed.
* **Use components**: replaces each `not-an-instance` hit with an instance of its component in the same place, keeping the texts.
* **Rename layers**: names default layers (`Frame 12`, `Text`) from their text or role.
* **Annotate**: opens the annotation popover.
Agent actions send a prompt with a selection chip to the chat and switch to Chat mode: **Optimize** (tighten layout and spacing to the token scale, fix contrast, keep the content, prefer components), **Make consistent with the design system**, **Write states** (empty, loading, error), **Variations ×3** and **Annotate with AI**.
**Send open notes to chat**, in the inspector's Annotations section for a top-level frame, sends the frame's open feedback and its `todo` / `question` notes as one prompt with a chip.
## Composer and attachments
Type in the composer, ⏎ sends and ⇧⏎ adds a line. The empty state offers suggestions built from the project, such as "Design a sign-in screen using this project's variables" or "Lint this page and fix warnings".
* **Selection**: the `@ Selection` chip adds the current selection to the message as a chip (also ⌘L). Each click adds another chip, labelled with the layer name or `<first> · N layers`; an identical selection is added once, and each chip is removed on its own. Every chip is sent as a short line with the layer name and node ids.
* **Start failures**: if a turn cannot start (agent missing, bad path), an error row with Retry shows in the thread and your text stays in the composer.
* **Images**: the image button opens a file picker. You can also paste a clipboard image or drop image files on the column (PNG, JPEG, GIF, WebP).
For the API backend, images are sent as image blocks, so the model sees them. For the CLIs and ACP agents, each image is saved under `.papercraft-chat-tmp/` in the project and its path is added to the prompt for the agent to read.
While a turn runs, the send button becomes **Stop**. Stop asks the backend to interrupt: the CLIs get an interrupt, or SIGINT, then a kill after 3 seconds; ACP agents get `session/cancel`, then a kill if they do not exit. Every backend ends within 3 seconds. The thread shows a muted "Stopped" line, not an error. Tools that already ran stay applied, and the partial run can be reviewed or reverted like any other.
## Storage
A chat is one file in the project: `chats/<id>.json`, holding the title, the backend (kind, model, effort, CLI or ACP session id, agent) and the messages with their tool calls, usage and run ids. The API backend also keeps `chats/<id>.api.json`, the raw messages array (Messages format with thinking blocks, or Chat Completions format, whichever the endpoint speaks), so a follow-up replays exactly. The chat records its endpoint id. Deleting a chat asks first and removes both files, and its saved images.
Projects without a `chats/` folder load unchanged. The newest chat opens when you enter Chat mode.
## Privacy
PaperCraft never writes an API key into a project file, a chat or a log. The key lives in the OS credential store. The CLIs and ACP agents run with your own logins and do not get the API keys from the environment: `ANTHROPIC_API_KEY`, `ANTHROPIC_AUTH_TOKEN`, `OPENAI_API_KEY` and `CODEX_API_KEY` are removed from their environment, so Claude Code and Codex bill your account, not a key you set for PaperCraft. The MCP server listens on loopback only, as it does for any other client.
Prompts, project content and tool results go to whichever backend you chose: the CLI's or agent's model service, or the base URL of the endpoint you picked. Nothing goes to any other service. An npx agent downloads its package from npm the first time it runs. If a server echoes your key in an error message, the app hides it before showing the message.
## Limits
* One turn per project at a time. Sending while a turn runs is refused with "A turn is already running"; use Stop first. Switching to another project stops a running turn.
* The web build has no Chat mode.
* While the agent works, the canvas shows fading outlines of the layers it touches; the full change review (added, changed, removed) comes after the turn, when the run is reviewed.
* Variations ×3 is a prompt for now: the agent makes the variants; there is no side-by-side Keep tag yet.
* Over the ACP stdio bridge the chat id does not reach the server, so those runs show under the agent's client name and close after 30 seconds idle instead of at turn end.
* The API backend stops after 40 tool rounds in one message and says so.
* Codex reports no per-call usage, so the context meter is hidden for it.
* Agents need to be installed and signed in with their own tools. Chat does not install them or sign them in for you.
* ACP terminal and file-system requests from an agent are answered as not supported. Agents use their own file tools.
+58 -12
View File
@@ -1,23 +1,53 @@
# Design systems in PaperCraft
A PaperCraft project can hold a small design system: color variables, components with instances, and icon sets. Today these are built and managed through the tools (MCP or `papercraft-cli`); the editor shows the results but has no panel for them yet (see [ROADMAP.md](../ROADMAP.md)).
A PaperCraft project can hold a design system: collections of typed variables with modes, components usable from any page, icon sets, and libraries that other projects can enable. The editor has a Variables modal, a Libraries modal and an Assets view for them (see [ROADMAP.md](../ROADMAP.md)); the same things are available through the tools (MCP or `papercraft-cli`).
## Variables
Named colors per project. Define them once, use them as `var(--name)`:
Variables live in **collections**. A collection has one or more **modes** (`Light`, `Dark`) and each variable has one value per mode. The project stores them in `design.json` next to `project.json`; every page keeps a derived copy that the renderer, lint and exports read, rebuilt on every change. A change from the UI or a tool updates every page in one undo step per page.
```sh
papercraft-cli call set_variables '{"variables":{"surface":"#313244","accent":"#cba6f7","on-accent":"#11111b"}}'
papercraft-cli call set_variables '{"collection":"Spacing","type":"number","variables":{"space/md":16,"space/lg":{"value":24}}}'
papercraft-cli call set_variables '{"variables":{"accent-hover":{"alias":"accent"}}}'
```
* Use `var(--name)` in `write_html`, `update_styles` and `create_artboard` for `background`, `backgroundColor` and `color`. The fill stays linked and the link is saved in the file.
* Calling `set_variables` again with a new value moves every linked fill, on every page, in one undo step.
* **Modes.** `set_variables {"mode":"Dark", ...}` stores one set of values for a mode; define another mode the same way. The first mode you define is active. `set_variable_mode {"mode":"Light"}` switches the whole project.
* `get_variables` lists the variables and modes. With `"format":"css"` it returns a `:root { --name: #hex }` block, with `"json"` a design-tokens object (`{"accent":{"$type":"color","$value":"#cba6f7"}}`).
* **Limits.** Colors only. Fills and text color follow variables; strokes and gradients get the resolved color at write time and do not follow later changes. No spacing, radius or font-size variables yet.
* **Types.** `color`, `number`, `string`, `boolean`. Numbers have no unit and bind as px. Strings are substituted as text (a font family, a shadow). Booleans bind to layer visibility. An alias points at a variable of the same type, in any collection or enabled library, and resolves per mode. A cycle is refused.
* **Groups.** A name is split on `/`: `color/brand/primary` sits in the group `color/brand`. Renaming a group in the Variables modal renames every variable under it and the bindings follow.
* **CSS names.** The name's segments joined with `-`, sanitized: `--color-brand-primary`. Use `var(--color-brand-primary)` in `write_html`, `update_styles` and `create_artboard` for `background`, `backgroundColor` and `color`. Two variables with the same CSS name across the collections of a project (library ones included) are refused when written.
* **Modes.** The active mode is chosen per page and per collection (Design tab), not per project; a new page inherits the active page's choice. `set_variables {"mode":"Dark", ...}` stores values for a mode, and the first mode you define is active. `set_variable_mode {"mode":"Light"}` switches the whole project. `create_collection {"name":"Brand","modes":["Light","Dark"]}` makes a collection with its modes up front.
* **Reading and exporting.** `get_variables` returns the collections (id, groups, type, value per mode, aliases, description, hidden), `pageModes`, and the older `variables` and `tokens` maps. With `"format":"css"` it returns a `:root { --name: #hex }` block plus `[data-theme]` rules for modes, with `"json"` a design-tokens object where groups nest on `/` and aliases are `{group.name}`, with `"tailwind"` an `@theme` block. Copy CSS, JSON and Tailwind are in the Variables modal too.
* **Deleting.** `delete_variables {"names":[...]}` refuses a variable that another one aliases and names the dependents; `"force":true` detaches them to the resolved value first. In the UI the same asks for confirmation. A removal affects every page.
* **Hidden.** A variable marked `hidden` stays in the file and is left out of published libraries.
Naming that works: roles, not hues (`surface`, `text-muted`, `accent`, `on-accent`, `danger`), so a mode can change the value without changing the meaning.
### Bindings
A fill that was written with `var(--name)` stays linked. Other fields bind with `bind_variable {"nodeIds":[...],"field":"gap","variable":"space/md"}` or with the variable button next to the field in the inspector. A bound field shows the variable as a chip with a detach button; detaching keeps the current value. `variable` may be the name or the CSS name; `null` detaches.
| Field | Type | Applies to |
|---|---|---|
| `stroke`, `text-color` | color | stroke color, text color |
| `width`, `height` | number | size in px |
| `gap` | number | auto-layout gap |
| `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left` | number | auto-layout padding (`padding` sets all four) |
| `radius` | number | corner radius |
| `font-size` | number | text size |
| `line-height` | number | below 4 it is a multiplier (`1.5`), from 4 up it is px |
| `opacity` | number | 0 to 1, values outside are clamped |
| `visible` | boolean | layer visibility |
A bound field is applied again when the variable, an alias target or the page's mode changes. Instances take bindings from their main; changing a bound field on an instance is an override for that instance only. Gradients cannot be bound yet.
### Migration
Projects made before collections open as project version 2: the first page's colors and modes become the collection `Colors`, its tokens become `Tokens` (a `16px` value becomes a number, anything else, including a unitless `1.5`, stays a string). CSS names do not change, so existing fill bindings keep working. PaperCraft 0.4.0 does not know `design.json`, so it refuses a migrated project with "made by a newer PaperCraft" instead of writing pages that would drift from it. Update before opening such a project on another machine.
### Variables modal
Open it from the Design tab ("Open variables"), the command palette (`Variables…`) or ⌘⌥⇧V. Collections of this file are on the left, then each enabled library (read-only), each with its group tree. The table has one row per variable in the selected group and one column per mode; cells edit in place (swatch and hex, number, text, toggle) and an alias picker links to another variable. Add a variable (choose its type), a mode or a collection from the header; rename, delete, search and a details pane (description, hidden, CSS name, how many layers use it) are there too.
## Components and instances
```sh
@@ -29,8 +59,9 @@ papercraft-cli call set_text_content '{"updates":[{"nodeId":"<label layer id fro
* Build the main component as a frame (usually its own artboard), then convert it. Name it `Component / Variant`.
* `create_instance` returns the instance id and its layers, so you can set text and styles on them. Changes made through `set_text_content` or `update_styles` on an instance are recorded as overrides; everything else follows the main component.
* In `write_html`, `<x-paper-instance component-id="<id>" layer-name="Button / Save"/>` places an instance inline.
* `get_components` lists main components and how many instances each has.
* **Limits.** Components and their instances must be on the same page. No variants or properties: model variants as separate components (`Button / Primary`, `Button / Secondary`). In the editor, detach with ⌘⌥B; there is no detach or swap tool.
* `get_components` lists the main components of every page (and library components) with `componentKey`, page and how many instances each has.
* **Across pages.** Instances can be placed from a main on any page: `create_instance` and `swap_instance` take a `componentId` (`pageId:num`) or a `componentKey` (stable, from `get_components`). Editing a main on page A updates its instances on every other page, one undo step per page. If the main is deleted its instances stay as they are, marked "Main missing" in Assets, where you can detach them. `<x-paper-instance component="Name"/>` in `write_html` links the same way when the main is on another page (it used to copy the main onto the page). `import_components` still copies mains onto a page, detached from the source; it is for moving a design system, not for using components.
* **Limits.** No variants or properties: model variants as separate components (`Button / Primary`, `Button / Secondary`). `detach_instance` and `swap_instance` exist as tools; in the editor detach with ⌘⌥B.
## Icons
@@ -44,9 +75,8 @@ Fill-based sets (Phosphor, Material) follow variables; Lucide is stroke-based an
> **Known limitation.** An icon's *stroke* color is frozen at import time: the value of the
> variable is baked into the stroke, so a stroke-based icon (Lucide, Tabler, Heroicons) does
> not follow the variable when it changes later — only fills keep the link. Letting strokes
> follow a variable needs a `stroke_var` field on the style, which changes the saved page
> format, so it is on the backlog. A `var(--x)` that does not exist is reported as a warning
> not follow the variable when it changes later. A layer's `stroke` can follow a variable with
> `bind_variable`; the icon's own stroke does not. A `var(--x)` that does not exist is reported as a warning
> and the icon keeps the color it inherits.
## Lint
@@ -65,6 +95,22 @@ Fill-based sets (Phosphor, Material) follow variables; Lucide is stroke-based an
Instances are skipped (their main component is linted). The rules are conventions, not law: pass `scale` to match your own type scale and ignore `info` items you disagree with. Lint does not judge taste; always look at `get_screenshot` too.
## Libraries
Any project can publish itself as a library, and other projects can enable it. This is a published snapshot, as in Figma, not a live link.
* **Publish.** Libraries modal, tab "This file", or `publish_library`. It writes `library.json` in the project folder with a version counter, the non-hidden variables, and every main component whose name does not start with `_` or `.`, each with its layers and a 256px preview. Before publishing the modal shows what changed since the last publish ("3 variables changed, 1 component added"); the tool returns the same list.
* **Enable.** Every project in the store with a `library.json` is available (projects synced from other devices through the relay show up too). `enable_library {"libraryId":...}` or the toggle in the Libraries modal copies the snapshot into the project (`libraries/<id>.json`). Its variables show read-only in the Variables modal and can be bound and aliased; its components show in Assets and are placed with `create_instance {"componentKey":...}`. Enabling is refused if a CSS name already exists in the project.
* **Updates.** When the published version is newer than the copy, the Libraries modal tab "Updates" and a dot on the Assets tab say so, and `list_libraries` reports `updateAvailable`. The review lists changed variables and components. `update_library` (or Update in the modal) replaces the snapshot, rebuilds every page and re-syncs the library's instances; instance overrides are kept. Updates are never applied by themselves.
* **Missing source.** If the library's project is deleted or not in the store, the copy keeps working. The modal shows "Source not found" and `list_libraries` shows `sourceFound: false`.
* **Disable.** `disable_library` or the toggle (after a confirm when it is in use) stops using a library: bindings to its variables are detached and keep the resolved value, local variables that aliased it keep the resolved value, its instances become plain frames, and its variables and components leave the project. One undo step per page.
Open the Libraries modal from the Share menu (`Libraries…`), the command palette, or the Assets header.
## Assets
The Assets view (side panel tab) replaces the old Library tab. It has a search box and sections for this file (by page), each enabled library, and My shapes (the personal shape library). Components are grouped by the part of the name before the first ` / ` (`Button / Primary` is in group `Button`) and shown as previews. Click one to place it at the viewport center, or drag it onto the canvas. Instances whose main was deleted are listed as "Main missing" with a detach action.
## Packages
A design system can travel as an **OpenDesign design-system package**: a folder with
+3 -1
View File
@@ -11,6 +11,8 @@ Ranked by value for the effort. Done items say where.
* Merge of concurrent edits to one shared page (`src/merge.rs`, `src/sync.rs`).
* Interface scale in Settings and the command palette (native).
* Export presets (inspector Export "+").
* Shared libraries: publish a project as a library, enable and update it in others (`src/libraries.rs`, Libraries modal); cross-page components; number variables.
* Design from the CLI with the app closed (`papercraft-cli --offline`, `shell`).
* Auto versions before agent edits: each agent run snapshots edited pages and can be reviewed or reverted (`src/runs.rs`, Agent view).
## Next
@@ -22,4 +24,4 @@ Ranked by value for the effort. Done items say where.
7. **Comment threads with replies from people, mentions, and a canvas pin that opens the thread**.
8. **Flatten menus into icon toolbars**: the Share menu and the folded Menu are flat lists; next is an icon rail for the most used actions with labels on hover.
9. **Window**: Windows asks the system for rounded corners and keeps the shadow. On Linux the window manager (or the Wayland client-side frame) draws the frame, and it is round on GNOME and KDE. A frame drawn by the app needs three things that cannot be checked without a Linux desktop: a transparent surface, a paint callback that clears the four corners with replace blending (egui cannot erase pixels it has already drawn), and its own edge resizing through `drag_resize_window`. Not built for that reason.
10. **One design-system package per brand** imported by every app's design file, plus a token export that generates the theme code (see `docs/shared-libs.md`).
10. **One design-system package per brand** imported by every app's design file, plus a token export that generates the theme code (see `docs/shared-libs.md`). Publishing the brand project as a library covers the sharing; the generated theme code is still todo.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 718 KiB

After

Width:  |  Height:  |  Size: 718 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 632 KiB

After

Width:  |  Height:  |  Size: 673 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 593 KiB

After

Width:  |  Height:  |  Size: 604 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 269 KiB

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 173 KiB

After

Width:  |  Height:  |  Size: 173 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 625 KiB

After

Width:  |  Height:  |  Size: 636 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 815 KiB

After

Width:  |  Height:  |  Size: 837 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 696 KiB

After

Width:  |  Height:  |  Size: 691 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 700 KiB

After

Width:  |  Height:  |  Size: 709 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 874 KiB

After

Width:  |  Height:  |  Size: 882 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

+2 -2
View File
@@ -36,7 +36,7 @@ Allowed spacing values: **4, 8, 12, 16, 24, 32, 48, 64** (and 96 for page sectio
* Define at least two modes if the product may be dark or light (`set_variables` with `mode`), and check both: lint contrast in each mode after `set_variable_mode`.
* Semantic colors carry meaning only: red means error or destructive, green means success. Do not use them decoratively.
* If a color you need is not a variable, add the variable, then use it. `lint_design` reports hard-coded colors that equal a variable.
* Radii, spacing and type sizes cannot be variables yet, so keep them on the lists in this skill and define them once on the design-system page.
* Spacing, radius and type sizes are number variables (`space/md`, `radius/sm`, `font/body`): define them once, in a collection of their own, and bind fields with `bind_variable`. Keep the values on the lists in this skill. Group names with `/` and alias semantic names to base ones (`color/button/bg` to `color/brand/primary`).
## 3. Type scale
@@ -78,7 +78,7 @@ Sizes: **12, 14, 16, 20, 24, 32, 40, 48, 64.** `lint_design` flags anything else
## 6. Touch targets and density
* Interactive targets are **at least 44px** tall and wide on touch (mobile, tablet). Make them 44 with padding (12 + 20 + 12), not just a bigger font. On dense desktop UIs 32 to 40 is acceptable; say so, and keep spacing between targets at 8 or more.
* `lint_design` checks frames named `Button…`, `Tab /…` and `Tab Bar /…` for height under 44, so **name interactive layers that way**.
* `lint_design` checks frames named `Button…`, `Tab /…` and `Tab Bar /…`: under 44px tall on a touch screen (or a component on its own), under 24px on a screen 1024px or wider (WCAG 2.2 AA for pointers). **Name interactive layers that way.**
* Mobile: body 16px or larger, side padding 16 to 24, bottom navigation within thumb reach, safe areas (status bar 44, home indicator 34 at the bottom).
## 7. Components and states
+40 -10
View File
@@ -19,7 +19,12 @@ papercraft-cli call get_basic_info # fails with exit 1 if the app is not ru
* Not running: ask the user to start PaperCraft and open a project (or `create_file` then `open_file`). `PAPERCRAFT_MCP_PORT` must match if the port was changed. Do not try to launch the GUI yourself unless asked.
* Read `get_basic_info` (pages, artboards, sizes, fonts), then `get_selection` (what the user is looking at) and `get_variables` and `get_components`. Reuse what exists before creating anything.
* `pageId` defaults to the page the user is viewing, which can change between calls: pass it explicitly. Node ids look like `3fa9c1:14`; never show them to the user.
* App closed (server, CI)? `papercraft-cli call --offline ... --project <name>` runs the same tools on the project store and saves after every editing call; `papercraft-cli shell` keeps one session for many calls and reads scripts from stdin. It is refused while the app has that project open. See `docs/agents.md`.
* With MCP tools you do not need the CLI; with a shell, `papercraft-cli list` and `papercraft-cli schema <tool>` give the schemas on demand. Pass big JSON on stdin: `... | papercraft-cli call write_html -`.
* **Working in the user's open project: use `papercraft-cli --online call …`** (or `PAPERCRAFT_CLI_NO_OFFLINE=1`). Without it, a call made while the app is starting or stuck silently falls back to offline writes on the files. `stderr` warns when the CLI and app versions differ: tell the user, don't ignore it.
* **One call at a time per agent.** No background loops or parallel batches against the app; a backlog of screenshot calls makes the app unresponsive for every agent.
* **App stops answering** ("did not answer in time", 0% CPU): usually a macOS dialog (a privacy prompt such as "access files on a removable volume") or a modal in the app. Tell the user and wait; never kill, quit or restart their PaperCraft.
* **See what the user sees**: `get_basic_info` / `get_selection` include `viewport {pageId, rect, zoom}`. `set_viewport {pageId, nodeIds | rect, zoom?}` switches page and frames things for the user; it refuses while they are moving the canvas (pass `force` only when they asked you to show something).
## 2. The loop: build, look, lint, fix
@@ -33,6 +38,23 @@ papercraft-cli call get_basic_info # fails with exit 1 if the app is not ru
Lint passes are necessary, not sufficient: contrast and grids say nothing about composition. The screenshot is the real test.
## 2b. Big jobs and several agents on one project
Lessons from redesigning a 3-page, 130-screen project with up to six agents at once:
* **Split by section, not by page.** Give each agent named sections (frame ids) and forbid the rest. New sections go below the current lowest one; re-read positions right before creating, since another agent may have just added one.
* **Section layout**: a section frame holds a title and rows of screen slots (a route label above a fixed-size screen). Keep 640 px between screens and rows and 1600 px between sections, so notes fit beside screens. Stack sections in one column.
* **Recreate, then delete.** Build the new screen next to the old one, finish it, then delete the old one, and record the deleted ids and names in the report. A cleanup agent once deleted buttons and lost icons by editing in place.
* **Reuse the design system across pages**: `create_instance` / `swap_instance` / `<x-paper-instance>` take a main from any page and stay linked. Never `import_components` to use a component: that copies mains onto the page, and instances made from the copies stop following the design system. `lint_design` flags hand-made look-alikes as `not-an-instance` (with the component key to use).
* **QA pass after a build** (screen by screen at scale 1, one call at a time): text layers with stale fixed widths clip labels ("In prog", "New sess"): set `width: fit-content`. Sidebars and panels fixed at 900 px stop short on taller screens: make them fill the height and let the screen hug with a 900 px minimum. Tags and chips overflowing their box, cards overlapping buttons, footers not pinned, leftover `Text` / `Frame` names, gendered copy about people whose gender is unknown (use their name or neutral wording).
* **Report per agent** in `specs/<feature>/<agent>-report.md`: what changed (ids), why (playbook rule ids from `playbook search`), open questions. Unknown product facts are written as questions for the team, never invented.
## 2c. Annotations
* Read the page's template first (`get_annotation_template {pageId}`), then one batched `annotate {pageId, notes:[{node, text, type}]}` per section, then `annotate {pageId, frame: <section id>, tidy: true}` (returns `{tidied: n}`; 0 means already placed).
* Content: the first line is the complete rule in 60 characters or fewer; the body is condition → outcome with values as `Field: value` lines; attach to the exact element, not the screen; few high-value notes; unknowns as `? (team)`. Rules: `playbook rule ANN`.
* Check placement with `get_screenshot {nodeId: <screen slot>, annotations: true, scale: 0.5}`; plain screenshots do not show notes. Cards must sit beside their target off any screen, lines must not cross other screens. Below 60% zoom the canvas shows notes as badges.
## 3. Naming
* Layers: `Noun` or `Component / Variant` (`Button / Primary`, `Tab / Today`, `Card / Task`, `Icon / gear`). Slashes group the layers panel.
@@ -78,15 +100,19 @@ Full flows: [recipes.md](references/recipes.md).
| Know the project, pages, artboards | `get_basic_info`, `get_tree_summary`, `get_children` |
| Know what is selected | `get_selection` |
| Inspect one node | `get_node_info`, `get_computed_styles`, `get_jsx` |
| Find nodes by text or style | `find_nodes` |
| See it | `get_screenshot` (`nodeId`, `scale` 1 or 2) |
| Find nodes by text or style | `find_nodes` (text contains the phrase, any case, every page) |
| Read all copy in a subtree | `get_tree_summary {nodeId, fullText: true}` (depth counts from the node: rows under a "Screens" frame need depth 3) |
| See it | `get_screenshot` (`nodeId`, `scale` 1 or 2, `annotations: true` to include notes) |
| Show the user something | `set_viewport` (page switch, fit, zoom) |
| Document rules on the design | `annotate`, `get_annotation_template`, `get_annotations`, `update_annotation`, `delete_annotations` |
| New screen | `create_artboard` (`width` and `height` required) |
| Add content | `write_html` (`insert-children` or `replace`) |
| Change styles or text | `update_styles`, `set_text_content`, `rename_nodes` |
| Whiteboard shapes, sticky notes, arrows | `create_shape` |
| Copy, move, delete | `duplicate_nodes`, `move_nodes`, `delete_nodes` |
| Tokens | `get_variables` (`format` css or json), `set_variables` (`mode`), `set_variable_mode` |
| Reuse | `create_component`, `create_instance`, `get_components`, `<x-paper-instance>` |
| Tokens | `get_variables` (`format` css, json or tailwind), `set_variables` (`collection`, `type`, `mode`, `alias`), `create_collection`, `delete_variables`, `set_variable_mode`, `bind_variable` |
| Reuse | `create_component`, `create_instance`, `swap_instance`, `get_components`, `<x-paper-instance>` |
| Shared libraries | `publish_library`, `list_libraries`, `enable_library`, `update_library`, `disable_library` |
| Icons | `search_icons`, `<x-paper-icon name="set:name">`; CLI: `papercraft-cli icons add\|list\|search` |
| Check quality | `lint_design` |
| Export | `export` (PNG, SVG, PDF to files), `export_combined_pdf` |
@@ -97,11 +123,11 @@ Full flows: [recipes.md](references/recipes.md).
## 6. Known limits (design around them)
* **Font is Inter only**, regular and bold plus italic. No other families, no weights between. Build hierarchy from size, weight, color and space.
* **Variables are colors only**, for fills and text color. Strokes and gradients keep fixed colors. Spacing, radius and type sizes are plain numbers: keep them on the scale by discipline and `lint_design`.
* **Variables** are typed (`color`, `number`, `string`, `boolean`), live in collections with modes, group with `/` (`space/md`, `color/brand/primary`) and can alias each other. Colors work as `var(--name)` on fills and text; every other field binds with `bind_variable` (stroke, text-color, width, height, gap, padding, radius, font-size, line-height, opacity, visible). Numbers bind as px; line-height below 4 is a multiplier. Gradients keep fixed colors.
* **No margin, grid or tables; no shadows, filters or transforms** (reported under `ignoredStyles`). Fake elevation with a border or a lighter surface.
* **No rotation.** Nodes are axis-aligned.
* **Components and their instances live on one page.** Put shared components on the page where they are used, or duplicate the component per page.
* **No variants or properties**: one component per variant (`Button / Primary`, `Button / Secondary`). No swap or detach tool.
* **Components work across pages**: `create_instance` takes a main from any page or enabled library (`componentId` or `componentKey` from `get_components`) and follows later edits. To share with other projects, `publish_library` there and `enable_library` here; `update_library` pulls a newer publish.
* **No variants or properties**: one component per variant (`Button / Primary`, `Button / Secondary`). `swap_instance` and `detach_instance` exist.
* **Remote images are not fetched.** Use a local path or `data:` URI.
* **One project open at a time**; moving layers between pages is not supported.
* **Text boxes with fixed widths can wrap earlier than in a browser.** Check headlines in the screenshot and widen.
@@ -111,8 +137,9 @@ Full flows: [recipes.md](references/recipes.md).
* **Text inside nested frames**: `set_text_content` needs the Text node id. Walk `get_children` down from the instance; instances copy the main's structure (`Meta > Label`, not a flat list).
* **No icon-colour follow for stroke sets** (Lucide, Tabler): the colour is frozen at write time, so a mode switch (Mocha to Latte) leaves icons as they were. Use a fill set (Phosphor, Material) when a design must switch modes.
* **Pages**: `create_page`, `rename_pages`, `delete_pages` (needs `confirm: true` when the page has layers; the last page stays). `move_nodes` accepts `toPageId` to copy between pages.
* **`get_screenshot` of `root` on a wide page** is scaled to fit and unreadable. Screenshot one artboard at a time. Hoisted components are not inside an artboard screenshot.
* **CLI saves images to the cwd** as `<tool>.png`; newer builds take `-o FILE`. Run the CLI from a scratch directory, or pass `-o`, and rename after.
* **`get_screenshot` of `root` on a wide page** is scaled to fit and unreadable. Screenshot one artboard (or one screen slot) at a time. Hoisted components are not inside an artboard screenshot.
* **CLI saves images to the cwd** as `<tool>.png`, or to `-o FILE`. The CLI writes the file itself; on older builds an `out` path made the app write it and could freeze the app behind a macOS privacy prompt, so update the CLI with the app (`tools/install-local.sh` installs both).
* **`swap_instance` renames the instance root to the new main's name** unless the name was overridden. Re-apply custom layer names after a batch swap (`rename_nodes`).
## 7. Troubleshooting
@@ -123,7 +150,10 @@ Full flows: [recipes.md](references/recipes.md).
| `write_html` reports `ignoredStyles` | You used a CSS property that has no equivalent (`margin`, `box-shadow`, `transform`...). Replace it, see [html-subset.md](references/html-subset.md). |
| Content is cut off | The artboard height is fixed. `update_styles` with `height: "fit-content"` or a larger number. |
| A color did not change with the theme | It was written as hex, or it is a stroke or gradient. Use `var(--name)` on fills and text; strokes need `update_styles` after a mode switch. |
| `create_instance` fails | The component is on another page. Instances must be on the component's page. |
| `create_instance` fails | Wrong `componentId` / `componentKey` (read `get_components`). Mains on other pages and enabled libraries work; no import needed. |
| A page is full of copied components at y=0 | Something imported mains onto the page (`import_components`, or old `write_html` builds). Swap their instances to the design-system mains (`swap_instance {componentKey}`), check a screenshot, then delete the unused copies. |
| `papercraft-cli --online` says "did not answer in time" | The app is blocked: look for a macOS dialog or an in-app modal and ask the user to answer it. Don't retry in a loop and don't restart the app. |
| A tool name is unknown, or the docs list tools the CLI lacks | The CLI is stale. `papercraft-cli list` reads the app's live list; reinstall the CLI with the app. |
| Icon does not appear | The set is not installed: `papercraft-cli icons add phosphor`, then `papercraft-cli icons search <words>` for the exact `set:name`. |
| Layer panel is a pile of `Frame` | You skipped `layer-name`. Fix with `rename_nodes` (batch) before finishing. |
| Text looks tiny in the screenshot | Screenshots default to scale 1. Use `scale: 2`. |
@@ -13,7 +13,7 @@ How to keep designs small, keep design and code in step, and spend few tokens do
* Build every repeated thing once: `create_component`, then `create_instance` or `<x-paper-instance>`. Never paste markup twice. A screen is mostly instances plus layout frames.
* No raw colours, radii, spacing or shadows in `write_html`: `var(--token)` only. Changing a token then updates every page, and `get_design_spec` reports token names, which is what code needs.
* Reuse across pages with `import_components` (instances stay linked) or `<x-paper-clone node-id="page:id">`. Do not rebuild a component per page.
* Reuse across pages with `create_instance {componentKey}` or `<x-paper-instance component="Name"/>` in `write_html`: a main on any page (or an enabled library, for `create_instance`) works directly and the instance stays linked to it. Do not `import_components` for that (it makes detached copies; it is for moving a design system). Do not rebuild a component per page.
* One design system per brand: `export_design_system` writes an OpenDesign package (variables, modes, tokens); `import_design_system` loads it into another project. That is the sync path between files and apps.
* Write one visual group per `write_html` (a header, a row), with `layer-name` on every box. Fewer, larger writes cost fewer round trips; groups that are too big make one bad style hard to find.
+213 -99
View File
@@ -5,12 +5,10 @@ Generated from `papercraft-cli schema <tool>`; run that command for the authorit
## Projects and pages
### `list_resources` (read-only)
Lists the user's papercraft projects (local folders), most recently modified first. Each item has id, name, path, page count, updatedAt, and `open` for the project open in the app.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `limit` | integer | | Maximum projects to return. Defaults to 50. |
@@ -25,7 +23,6 @@ Opens a project in the app (saving the current one) and returns a get_basic_info
Creates a new empty project and returns its id. Call open_file with the id to work in it.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `name` | string | | Optional project name. |
@@ -35,7 +32,6 @@ Creates a new empty project and returns its id. Call open_file with the id to wo
Creates a new page at the end of the page list and returns its id, without switching the user's page. Use the returned pageId in later calls.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `name` | string | | Optional page name. Defaults to "Page N". |
@@ -45,7 +41,6 @@ Creates a new page at the end of the page list and returns its id, without switc
Rename one or more pages. Does not switch the user's page.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `updates` | array of object | yes | Page renames. |
@@ -55,33 +50,30 @@ Rename one or more pages. Does not switch the user's page.
Delete one or more pages. The last page of a project cannot be deleted. A page that still has layers is only deleted with `confirm: true`; check what is on it first (get_basic_info lists node counts).
| Argument | Type | Required | Notes |
|---|---|---|---|
| `pageIds` | array of string | yes | Pages to delete. |
| `confirm` | boolean | | Required to delete a page that has layers. |
| `pageIds` | array of string | yes | Pages to delete. |
## Read
### `get_basic_info` (read-only)
Essential context about the open project: project name, the page, node count, artboards (top-level frames) with ids, sizes and world positions, other top-level layers, fonts, and `pages` with the active one marked isActive.
Essential context about the open project: project name, the page, node count, artboards (top-level frames) with ids, sizes and world positions, other top-level layers, fonts, `pages` with the active one marked isActive, and `viewport` ({pageId, rect: [x, y, w, h] world, zoom}: what the user sees).
- worldX/worldY are world positions; x/y are relative to the parent.
- Pass pageId to inspect another page without switching the user's view.
### `get_selection` (read-only)
The selected layers on the page the user is viewing: ids, names, types, sizes, positions and the artboard each belongs to.
The selected layers on the page the user is viewing: ids, names, types, sizes, positions and the artboard each belongs to, plus `viewport` ({pageId, rect: [x, y, w, h] world, zoom}).
### `get_node_info` (read-only)
Details of one node: type, name, size, visibility, lock state, parent, children ids, text content, x/y (relative to parent) and worldX/worldY. Errors if it doesn't exist.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeId` | string | yes | The node to inspect. |
@@ -91,7 +83,6 @@ Details of one node: type, name, size, visibility, lock state, parent, children
Direct children of a node (or of the page root when nodeId is "root"), with ids, names, types, child counts and positions.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeId` | string | yes | The parent node, or "root". |
@@ -101,63 +92,69 @@ Direct children of a node (or of the page root when nodeId is "root"), with ids,
Compact indented text tree of a subtree: type, name, id and size per node. Much cheaper than get_jsx for orientation. nodeId "root" summarizes the whole page.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `depth` | number | | Maximum depth (default 3, max 10). |
| `depth` | number | | Levels shown, counting nodeId (or each top-level layer for "root") as level 1 (default 3, max 10). Deeper levels collapse to "… N children". |
| `fullText` | boolean | | Show each text layer's complete text instead of its first 40 characters (for copy review). |
| `nodeId` | string | yes | Root of the summary, or "root". |
Depth counts from the node you pass, not from the page. For an artboard `Home` with a `Screens` frame holding rows, `{"nodeId": "<Home id>", "depth": 2}` stops at `Screens`:
```
frame "Home" [3fa9c1:1] 1440×900
frame "Screens" [3fa9c1:2] fill(1440)×hug(820)
… 3 children
```
The rows inside `Screens` are level 3, so they need `depth: 3` from `Home` (the default), or `depth: 2` from `Screens` itself. With `nodeId: "root"` every artboard is level 1, so the same rows also need `depth: 3`.
### `get_jsx` (read-only)
Export a node and its descendants to code: `"inline"` (default, React JSX with inline styles), `"tailwind"` (React JSX with Tailwind CSS utility classes), `"react"` (typed React TSX component with Tailwind classes), `"angular"` (Angular standalone `@Component` with template and CSS), `"html"` (self-contained `<style>` + HTML markup), or `"egui"` (Rust `egui` layout code with a `tokens` module).
Export a node and its descendants to code: "inline" (default, React JSX with inline styles), "tailwind" (React JSX with Tailwind CSS utility classes), "react" (React TSX component), "angular" (Angular v17+ standalone component), "html" (self-contained <style> + HTML markup), or "egui" (Rust egui 0.36 code with tokens).
| Argument | Type | Required | Notes |
|---|---|---|---|
| `format` | `inline` \| `inline-styles` \| `tailwind` \| `react` \| `angular` \| `html` \| `egui` | | Output format: `"inline"` (default), `"tailwind"`, `"react"`, `"angular"`, `"html"`, or `"egui"`. |
| `format` | `inline` \| `inline-styles` \| `tailwind` \| `react` \| `angular` \| `html` \| `egui` | | Output format: "inline" (default), "tailwind", "react", "angular", "html", or "egui". |
| `nodeId` | string | yes | The node to convert. |
### `get_design_spec` (read-only)
Extract a comprehensive AI design-to-code specification (`ai_spec_markdown` and structured JSON `spec`) for a node and its descendants. Includes the hierarchy, exact auto-layout flow/sizing (`fixed`, `hug`, `fill`), bound design tokens (`--var`), component instances (`instanceOf` on each node plus `componentDefinitions`), icons (`kind:"icon"` with set, name, size and tint), vector SVG (`svg`, `svgBounds`), text metrics (weight, line height, letter spacing), min and max sizes, fills and gradients, token matches for spacing, radius and type, implementation rules, and reference code for the chosen `target`. Always call this before implementing a design in code.
Export a deterministic AI Design-to-Code specification for a frame or subtree. Includes all design tokens/variables, component instances, exact auto-layout tree (sizing, flex/grid/egui flow, gaps, paddings, bound `--var` colors), mandatory enforcement rules, and reference target code. Always call this before implementing a design in React, Tailwind, Angular, HTML/CSS, or Rust egui instead of guessing from a screenshot.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeId` | string | yes | The root frame or node to extract the spec for. |
| `target` | `react` \| `tailwind` \| `angular` \| `html` \| `egui` | | Target framework/format (defaults to `"react"`). |
| `format` | `markdown` \| `json` | | Output format: "markdown" (default) or "json". |
| `nodeId` | string | yes | Root frame or node id to export. |
| `target` | `react` \| `tailwind` \| `angular` \| `html` \| `egui` | | Target UI framework (default "react"). |
### `verify_code` (read-only)
Enforce design-to-code fidelity by checking written `code` against the source PaperCraft node (`nodeId`) for the given `target`. Reports a `score` (0–100), `passed` boolean, and structured violations (`missing-text`, `hardcoded-color`, `forbidden-absolute`, `missing-layout`, `missing-component`, `spacing-drift`) with actionable fixes.
Verify that AI-generated UI code (`react`, `tailwind`, `angular`, `html`, or `egui`) accurately implements a design subtree. Checks for missing text strings, hardcoded hex colors where `--var` or `tokens::*` must be used, forbidden `position: absolute` on auto-layout flow children, missing flex/grid/egui layout containers, unreferenced component instances, and spacing drift. Returns `{passed, score, errors, warnings, violations}`.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `code` | string | yes | The generated or hand-written implementation code to verify. |
| `nodeId` | string | yes | The PaperCraft node id the code implements. |
| `target` | `react` \| `tailwind` \| `angular` \| `html` \| `egui` | yes | Target language/framework of `code`. |
| `code` | string | yes | The generated UI source code to verify against the design. |
| `nodeId` | string | yes | Root frame or node id that the code implements. |
| `target` | `react` \| `tailwind` \| `angular` \| `html` \| `egui` | yes | Target UI framework. |
### `diff_frames` (read-only)
Compare two frames or subtrees (`beforeId` and `afterId`) and report property-level differences (size, position, fills, stroke, corner radius, opacity, text, layout, added/removed children).
| Argument | Type | Required | Notes |
|---|---|---|---|
| `beforeId` | string | yes | First frame or node id (baseline). |
| `afterId` | string | yes | Second frame or node id (comparison). |
| `beforeId` | string | yes | First frame or node id (baseline). |
### `get_computed_styles` (read-only)
CSS styles (camelCase) of one or more nodes, as {nodeId: styles}.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeIds` | array of string | yes | Nodes to read. |
@@ -165,8 +162,7 @@ CSS styles (camelCase) of one or more nodes, as {nodeId: styles}.
### `find_nodes` (read-only)
Find nodes by text content and/or computed style. Searches the whole project by default; pass pageId for one page or nodeId for a subtree. `textValue` matches text case-insensitively with * wildcards anchored to the whole value. `filters` are {styleName, styleValue} pairs (AND), values may use * wildcards; colors match by value.
Find nodes by text content and/or computed style. Searches the whole project by default; pass pageId for one page or nodeId for a subtree. `textValue` finds text containing it, ignoring case and line breaks; with * wildcards it must match the whole value ("Get *"). `filters` are {styleName, styleValue} pairs (AND), values may use * wildcards; colors match by value.
| Argument | Type | Required | Notes |
|---|---|---|---|
@@ -179,7 +175,6 @@ Find nodes by text content and/or computed style. Searches the whole project by
The image used by a node's image fill, as image content.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeId` | string | yes | A node with an image fill. |
@@ -189,7 +184,6 @@ The image used by a node's image fill, as image content.
Whether font families are available and their weights/styles. papercraft renders text with Inter (400, 700, normal and italic); other families fall back to Inter.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `familyNames` | array of string | yes | |
@@ -199,7 +193,6 @@ Whether font families are available and their weights/styles. papercraft renders
Read a guide. Topics: "papercraft-mcp-instructions" (read first), "html" (what write_html supports), "whiteboard" (shapes, arrows, stickies, hand-drawn style).
| Argument | Type | Required | Notes |
|---|---|---|---|
| `topic` | string | yes | |
@@ -207,16 +200,15 @@ Read a guide. Topics: "papercraft-mcp-instructions" (read first), "html" (what w
## See and export
### `get_screenshot` (read-only)
Render a node (or the whole page when nodeId is omitted or "root") to a PNG and return it as an image. Scale 1 (default) is enough for layout checks; use 2 to read small text. Large images are scaled down to fit API limits. In `papercraft-cli`, pass `-o`/`--out FILE` or `{"out": "FILE"}` to choose the output file path.
Render a node (or the whole page when nodeId is omitted or "root") to a PNG and return it as an image. Scale 1 (default) is enough for layout checks; use 2 to read small text. Large images are scaled down to fit API limits.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `annotations` | boolean | | Also draw the note cards, badges and leader lines of notes on the captured layers; the image grows to include the cards. |
| `nodeId` | string | | The node to capture; omit for the whole page. |
| `out` | string | | Optional file path to save the PNG to (also used by `papercraft-cli`). |
| `out` | string | | Optional file path to save the PNG to (also used by papercraft-cli). |
| `scale` | number | | Render scale: 1 (default) or 2. |
@@ -224,7 +216,6 @@ Render a node (or the whole page when nodeId is omitted or "root") to a PNG and
Export nodes to files. `nodes` maps node ids to export settings ([{format: png|svg|pdf, scale: "2x" | "512w" | "512h" | "720p"}]; [] = 2x PNG). Files go to `directory` (default: the Downloads folder). Returns the paths written.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `directory` | string | | Output folder (absolute path). |
@@ -235,7 +226,6 @@ Export nodes to files. `nodes` maps node ids to export settings ([{format: png|s
Export several nodes into one PDF, one page per node, ordered top-to-bottom then left-to-right. Returns the file path.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeIds` | array of string | yes | Nodes to put on the pages. |
@@ -244,12 +234,10 @@ Export several nodes into one PDF, one page per node, ordered top-to-bottom then
## Write
### `create_artboard`
Creates an artboard (top-level frame) and returns its id; then add content with write_html({mode: "insert-children"}). `styles` are camelCase CSS; width and height are required (e.g. "1440px"). Artboards default to display:flex, flexDirection:column and a white background, and are placed in an empty spot unless left/top are given. Default sizes: desktop 1440×900, tablet 768×1024, mobile 390×844.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `name` | string | yes | Layer name. |
@@ -261,18 +249,17 @@ Creates an artboard (top-level frame) and returns its id; then add content with
Parse HTML with inline styles into layers. Write incrementally: each call should add one visual group (a header, one list row, a card) so the user sees progress.
- mode "insert-children" appends the HTML inside targetNodeId ("root" = the page); "replace" replaces targetNodeId with it.
- Inline styles only. Flexbox (display:flex, flex-direction, gap, padding, align-items, justify-content, align-self, flex-grow, flex-wrap) is the layout model; block elements stack vertically. position:absolute with left/top is supported. No margin, grid or tables.
- Text: font-size, font-weight (≥600 = bold), font-style, color, line-height, letter-spacing, text-align, text-decoration (including `wavy` and `text-decoration-color`); <b>/<i>/<u>/<s>/<span style> make rich text. Font family is always Inter.
- Text: font-size, font-weight (≥600 = bold), font-style, color, line-height, letter-spacing, text-align, text-decoration (including wavy and text-decoration-color); <b>/<i>/<u>/<s>/<span style> make rich text. Font family is always Inter.
- Boxes: background(-color/-image: colors, linear/radial gradients, url()), border (and border-top/right/bottom/left), border-radius, opacity, overflow:hidden, mix-blend-mode, width/height (px, %, fit-content), min-width/max-width/min-height/max-height.
- <img src> takes paper-asset:///abs/path, file:// URLs, absolute paths or data: URIs. <svg> markup is imported as vector layers.
- <x-paper-icon name="set:name" size="20" color="var(--accent)"/> places an installed icon (search_icons); <x-paper-instance component="Name" component-id="ID" layer-name="..."/> places a component instance; colors may be var(--name) of set_variables.
- layer-name="..." names layers; <x-paper-clone node-id="ID" style="..."/> clones an existing node (supports cross-page `<page>:<id>`).
Returns the ids of the created top-level layers and the styles that were ignored.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `html` | string | yes | HTML to parse into layers. |
| `mode` | insert-children/replace | yes | |
| `mode` | `insert-children` \| `replace` | yes | |
| `targetNodeId` | string | yes | Target node id, or "root" for the page. |
@@ -280,7 +267,6 @@ Returns the ids of the created top-level layers and the styles that were ignored
Update styles on one or more nodes (camelCase CSS, like React.CSSProperties). Setting left/top on an artboard moves it. Hand-drawn keys: sketch, roughness, fillStyle, strokeStyle, seed. Styles with no effect are returned under ignoredStyles.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `updates` | array of object | yes | Each item applies styles to nodeIds. |
@@ -290,7 +276,6 @@ Update styles on one or more nodes (camelCase CSS, like React.CSSProperties). Se
Set the text of one or more Text or Sticky nodes (batch).
| Argument | Type | Required | Notes |
|---|---|---|---|
| `updates` | array of object | yes | |
@@ -300,7 +285,6 @@ Set the text of one or more Text or Sticky nodes (batch).
Rename layers (batch). Names are truncated to 50 characters.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `updates` | array of object | yes | |
@@ -310,7 +294,6 @@ Rename layers (batch). Names are truncated to 50 characters.
Delete nodes and their descendants. Verify parents with get_node_info first when unsure.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeIds` | array of string | yes | Nodes to delete. |
@@ -320,27 +303,24 @@ Delete nodes and their descendants. Verify parents with get_node_info first when
Deep-clone nodes, including across pages (via `toPageId` or a cross-page `parentId`; `<x-paper-clone node-id="<page>:<id>"/>` also works across pages). Each copy goes under parentId when given, else next to its source; duplicated artboards are placed in an empty spot. Returns new ids and a descendantIdMap from every original descendant id to its copy.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodes` | array of object | yes | Items accept `{id, parentId?, toPageId?}`. |
| `nodes` | array of object | yes | |
### `move_nodes`
Move nodes keeping their ids (or onto another page via `toPageId` or a cross-page `parentId` / `before` / `after`). Each move is {nodeId, before: siblingId}, {nodeId, after: siblingId} or {nodeId, parentId, toPageId?, index?} (parentId "root" = the page root). Moves apply in order. In auto-layout parents this changes the visual order; in free parents it changes stacking and keeps the world position.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `moves` | array of object | yes | Items accept `{nodeId, before?, after?, parentId?, toPageId?, index?}`. |
| `moves` | array of object | yes | |
### `create_shape`
Create a whiteboard element: rectangle, ellipse, diamond, triangle, polygon, star, line, arrow, sticky (sticky note with text) or text. Coordinates are world units, or relative to parentId when given. Lines and arrows take `points` ([[x,y],...], at least two) and arrows may bind to layers with startNodeId/endNodeId (the arrow then follows them). `styles` takes the same CSS as update_styles plus the hand-drawn keys sketch, roughness (0 architect, 1 artist, 2 cartoonist), fillStyle (hachure, cross-hatch, solid, zigzag, dots), strokeStyle (solid, dashed, dotted). Arrows also take route (straight, curved, elbow) and startHead/endHead (none, arrow, triangle, dot, bar, diamond).
| Argument | Type | Required | Notes |
|---|---|---|---|
| `endHead` | string | | |
@@ -349,13 +329,13 @@ Create a whiteboard element: rectangle, ellipse, diamond, triangle, polygon, sta
| `name` | string | | |
| `parentId` | string | | Frame to place the shape in. |
| `points` | array of array | | |
| `route` | straight/curved/elbow | | |
| `route` | `straight` \| `curved` \| `elbow` | | |
| `sides` | integer | | Polygon sides / star points. |
| `startHead` | string | | |
| `startNodeId` | string | | |
| `styles` | object | | CSS and hand-drawn styles. |
| `text` | string | | Text for sticky and text. |
| `type` | rectangle/ellipse/diamond/triangle/polygon/star/line/arrow/sticky/text | yes | |
| `type` | `rectangle` \| `ellipse` \| `diamond` \| `triangle` \| `polygon` \| `star` \| `line` \| `arrow` \| `sticky` \| `text` | yes | |
| `width` | number | | |
| `x` | number | | |
| `y` | number | | |
@@ -363,33 +343,71 @@ Create a whiteboard element: rectangle, ellipse, diamond, triangle, polygon, sta
## Design system
### `get_variables` (read-only)
Color variables and design tokens of the page's project (name -> hex/value). Fills that follow a variable were written with `var(--name)`; set_variables moves all of them at once. `format` `css` returns a `:root { --name: #hex }` block (plus `[data-theme]` rules for modes), `json` returns a W3C DTCG design-tokens object, and `tailwind` returns a Tailwind v4 `@theme` block.
Variables of the page's project. Default JSON: `variables` (name -> hex), `tokens`, and `collections` (id, name, modes, defaultMode, variables with id, name, cssName, group, type color|number|string|boolean, values per mode name, aliases as {"alias": name}, description, hidden) plus `pageModes` (active mode per collection on this page). Fills that follow a variable were written with `var(--name)`; set_variables moves all of them at once. `format` css returns a `:root { --name: #hex }` block (plus `[data-theme]` rules for modes), json a W3C DTCG object (groups nest on `/`, aliases are {group.name}), and tailwind a Tailwind v4 `@theme` block.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `format` | `css` \| `json` \| `tailwind` | | Output format: `css`, `json` (W3C DTCG), or `tailwind` (`@theme`). |
| `format` | `css` \| `json` \| `tailwind` | | |
### `set_variables`
Define or change color variables (names like `surface`, `accent-text`), on every page. Use them as `var(--name)` in write_html / update_styles / create_artboard colors (backgroundColor, background, color) instead of hex literals, so a theme change is one call. Fills already following a changed variable are updated. Variables apply to fills and text color; strokes and gradients keep fixed colors.
Define or change variables (names like `surface`, `accent-text`, or grouped `color/brand/primary`), on every page. Plain {"name": "#hex"} defines a color. An entry may be an object {value, type, collection, mode, alias, description, hidden}: `type` color|number|string|boolean (numbers bind as px), `collection` a name or id (created if missing), `alias` the name of another variable of the same type. Use them as `var(--name)` in write_html / update_styles / create_artboard colors (backgroundColor, background, color) instead of hex literals, so a theme change is one call. Fills already following a changed variable are updated. Variables apply to fills and text color; strokes and gradients keep fixed colors.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `collection` | string | | Default collection (name or id) for entries that name none. |
| `mode` | string | | Store the values for this mode (e.g. "Light", "Dark"); they apply when it is the active mode. The first mode you define becomes active. |
| `variables` | object | yes | {"accent": "#cba6f7", "surface": "#313244"} |
| `type` | `color` \| `number` \| `string` \| `boolean` | | Default type for entries that name none. |
| `variables` | object | yes | {"accent": "#cba6f7"} or {"space/md": {"value": 16, "type": "number"}, "accent-hover": {"alias": "accent"}} |
### `create_collection`
Create a variable collection (a set of variables with modes), e.g. `Brand` with modes ["Light", "Dark"]. Without `modes` it has one mode, `Default`. Then fill it with set_variables {collection}.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `modes` | array of string | | |
| `name` | string | yes | |
### `delete_variables`
Delete variables by name. A variable another one aliases is refused (the error names the dependents) unless `force` is true, which gives the dependents its resolved value.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `force` | boolean | | |
| `names` | array of string | yes | |
### `set_tokens`
Define non-color design tokens (spacing, radius, font size, shadows, widths), on every page: {"spacing-md": "16px", "radius-md": "8px", "shadow-md": "0 4px 12px rgba(0,0,0,0.08)"}. Use `var(--spacing-md)` in any style value (padding: var(--spacing-sm) var(--spacing-md), boxShadow: var(--shadow-md)); it is replaced by the value when written, so tokens are a shared vocabulary, not live links. Listed by get_variables.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `tokens` | object | yes | |
### `bind_variable`
Bind a field of layers to a variable (or detach it). `field`: stroke, text-color, width, height, gap, padding, padding-top/right/bottom/left, radius, font-size, line-height, opacity, visible. `variable` is a name like color/brand/primary or its css name; null or omitted detaches (the current value stays). The value applies at once; on an instance the field becomes an override.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `field` | string | yes | |
| `nodeIds` | array of string | yes | Layers to bind. |
| `variable` | string \| null | | |
### `set_variable_mode`
Switch the active variable mode (defined with set_variables {mode}): every variable takes that mode's value and all fills following them change, on every page. One call turns a whole design from light to dark.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `mode` | string | yes | |
@@ -399,44 +417,38 @@ Switch the active variable mode (defined with set_variables {mode}): every varia
Import an OpenDesign design-system package: a folder with manifest.json, tokens.css and (optional) DESIGN.md. The colors of the `:root` block become variables, the colors of the `[data-theme="name"]` blocks become modes and every other value becomes a token. Replaces the variables, modes and tokens of every page in one undo step. Only hex colors become variables; oklch(), rgb() and sizes stay tokens.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `path` | string | yes | Folder of the package to import. |
| `pageId` | string | | The design system is project-wide, so it lands on every page. |
### `export_design_system`
Write the page's variables, modes and tokens as an OpenDesign design-system package (manifest.json, tokens.css and DESIGN.md) in `path`, so it can be read back with import_design_system or by other tools. Returns the files written.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `path` | string | yes | Folder to write the package into. |
| `pageId` | string | | The page whose design system is written. |
### `get_components` (read-only)
Main components on a page (id, name, size) with how many instances each has.
Main components of every page (or one with `pageId`): id, name, `componentKey` (stable), `pageId`, `pageName`, size, and `uses` (instances across all pages).
### `import_components`
Copy the main components anywhere on `fromPageId` (including inside artboards, typically on a `Design System` page) onto this one, so you can place instances here with `create_instance` or `<x-paper-instance component="Name" component-id="ID"/>`. Components with the same name already here are skipped. Copies are placed in rows (wrapping at 3200 px) to the right of the page content; shelf-pack them yourself using their real sizes if you want a tidy parking area. Variables and tokens are already shared by every page; components are copies, not live links.
Copies mains onto this page (detached from the source); only for moving a design system, not for using components: create_instance and swap_instance take a main on any page or an enabled library directly, with no import. Copies the main components anywhere on `fromPageId` (including inside artboards); components with the same name already here are skipped. Variables and tokens are already shared by every page.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `fromPageId` | string | yes | Source page id. |
| `fromPageId` | string | yes | |
| `names` | array of string | | Only these components (default all). |
### `create_component`
Turn a frame or artboard into a main component. Build reusable parts (button, row, chip, tab) once as components, then place them with create_instance or `<x-paper-instance component="Name" component-id="ID"/>`. Components and instances live on one page.
Turn a frame or artboard into a main component. Build reusable parts (button, row, chip, tab) once as components, then place them with create_instance or <x-paper-instance>. Instances may live on any page and follow the main.
| Argument | Type | Required | Notes |
|---|---|---|---|
@@ -446,12 +458,12 @@ Turn a frame or artboard into a main component. Build reusable parts (button, ro
### `create_instance`
Place an instance of a component. Edit text and styles on the instance's descendants with set_text_content / update_styles (they become overrides); edits to the main component flow to every instance. Returns the instance id and its text layers.
Place an instance of a component. componentKey may be a component on any page or an enabled library; no import needed (the instance stays linked to that main). Edit text and styles on the instance's descendants with set_text_content / update_styles (they become overrides); edits to the main component flow to every instance. Returns the instance id and its text layers.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `componentId` | string | yes | |
| `componentId` | string | | A main on any page ("pageId:num"). |
| `componentKey` | string | | Instead of componentId: the key from get_components. |
| `index` | number | | Position among the parent's children. |
| `name` | string | | |
| `parentId` | string | | Parent frame; omit or "root" for the page. |
@@ -461,12 +473,12 @@ Place an instance of a component. Edit text and styles on the instance's descend
### `swap_instance`
Swap an instance root to point at a different main component on the same page, preserving overrides on descendants matched by name and layer type.
Swap an instance root to point at a different main component, preserving overrides on descendants matched by name and layer type. componentKey may be a component on any page or an enabled library; no import needed.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `componentId` | string | yes | The new main component id. |
| `componentId` | string | | The new main component id. |
| `componentKey` | string | | Instead of componentId: a key from get_components, including a library component. |
| `nodeId` | string | yes | The instance root node to swap. |
@@ -474,7 +486,6 @@ Swap an instance root to point at a different main component on the same page, p
Detach one or more component instances into plain frames, breaking their link to the main component while keeping their current appearance and children.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeIds` | array of string | yes | Instance root nodes to detach. |
@@ -484,7 +495,6 @@ Detach one or more component instances into plain frames, breaking their link to
Search installed open icon sets (Lucide, Tabler, Phosphor, Heroicons, Material). Returns `set:name` references for <x-paper-icon name="lucide:check" size="20" color="var(--text)"/> in write_html. Without a query it lists installed and installable sets; install with `papercraft-cli icons add lucide`.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `limit` | number | | Default 20. |
@@ -492,11 +502,10 @@ Search installed open icon sets (Lucide, Tabler, Phosphor, Heroicons, Material).
| `set` | string | | |
### `lint_design` (read-only)
### `lint_design`
Check a page or subtree for common design mistakes and get a fix for each: text contrast (WCAG 4.5:1, 3:1 for large text), text under 12px, font sizes off the type scale, gap/padding off the 4px grid, buttons and tabs under 44px tall, default layer names (Frame, Rectangle), and hard-coded colors that equal a variable. Run it before finish_working_on_nodes and fix errors and warnings; `info` items are suggestions. Pass `fix: true` to automatically snap spacing/padding to 4px, relink matching color variables, snap text sizes, and enlarge small touch targets.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `fix` | boolean | | Apply safe automatic fixes before reporting remaining issues. |
@@ -504,37 +513,131 @@ Check a page or subtree for common design mistakes and get a fix for each: text
| `scale` | array of number | | Allowed font sizes. Default 12, 14, 16, 20, 24, 32, 40, 48, 64. |
## Session
## Libraries
### `publish_library`
### `get_feedback` (read-only)
Notes the user left on layers (the Feedback box in the inspector, shown as amber dots on the canvas): which layer, where it sits, what to change. Omitting `pageId` queries all pages across the project; `openCount` and `resolvedCount` are returned alongside per-page counts in `get_basic_info`. Call it at the start of a session and after each round of edits; fix every open note, then `resolve_feedback`. `get_selection` also includes the selected layers' notes.
Publish this project's variables (not hidden) and components (not named with a leading `_` or `.`) as a library other projects can enable. Writes library.json with the next version and returns what changed since the last publish.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `includeResolved` | boolean | | Include resolved notes. |
| `description` | string | | What the library is for (kept from the last publish when omitted). |
### `list_libraries` (read-only)
Libraries other projects published (`available`, with `enabled`) and the ones this project uses (`enabled`: version, sourceVersion, sourceFound, updateAvailable).
### `enable_library`
Use a published library: its variables become read-only, bindable and aliasable, and its components can be placed with create_instance componentKey. Refused when a CSS name is already defined here.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `libraryId` | string | yes | From list_libraries. |
### `update_library`
Apply the library's newest publish to this project: variables and components are replaced and every instance of it re-synced, overrides kept. Returns the changes.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `libraryId` | string | yes | |
### `disable_library`
Stop using a library: bindings to its variables are detached (values kept), its instances become plain frames, its variables and components leave this project.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `libraryId` | string | yes | |
## Annotations
### `annotate`
Add notes to node ids or exact layer names on a page in one undo step. First text line is label; remaining lines are body. Type is an allowed category key (default rule); put fields as "Name: value" lines in text. Placement is automatic (tidy re-lays-out). Returns [number, node, type, label] rows; tidy alone returns {tidied: moved}.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `frame` | string | | With tidy: only the notes on this frame. |
| `notes` | array of object | | `{node, text, type?}`. |
| `pageId` | string | | |
| `tidy` | boolean | | Re-layout all notes (of frame, else the page) as part of this undo step; notes may then be omitted. |
Check the placement with `get_screenshot {"nodeId": "<frame>", "annotations": true}`.
### `get_annotation_template` (read-only)
Read the page's annotation template: [type key, guidance, field names] for each allowed type. Call once before annotate.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `pageId` | string | | |
### `set_annotation_template`
Switch the annotation template by id or name, for one page or the whole project. Annotate only accepts the template's types.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `pageId` | string | | |
| `scope` | string | | `page` or `project`. |
| `template` | string | yes | |
### `upsert_annotation_template`
Create or replace an annotation template, optionally defining new categories (key, name, #hex color, icon name) first. Reuse existing keys freely. One undo step for the edit; setAs page adds a second. Returns {id, name, types}.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `categories` | array of object | | Category styles `{key, name, color, icon}`; an existing key is updated, a new key needs all four. |
| `pageId` | string | | |
| `setAs` | string | | `project` or `page`. |
| `template` | object | yes | `{id?, name, display?: full or badges, categories: [{key, enabled?, guidance?, fields?}]}`. |
### `delete_annotation_template`
Delete an annotation template by id or name. The last template cannot be deleted; a project default pointing at it reverts to Product spec.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `template` | string | yes | |
## Session
### `get_feedback` (read-only)
Notes the user left on layers (the Feedback box in the inspector, shown as amber dots on the canvas): which layer, where it sits, what to change. Omitting `pageId` queries all pages across the project; `openCount` and `resolvedCount` are returned alongside per-page counts in `get_basic_info`. Call it at the start of a session and after each round of edits; fix every open note, then resolve_feedback. `get_selection` also includes the selected layers' notes.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `includeResolved` | boolean | | |
| `nodeId` | string | | Only this layer. |
| `pageId` | string | | Omit to query all pages across the project. |
### `add_feedback`
Leave a note on a layer (author `agent` by default), e.g. a question or a problem you could not fix. The user sees it in the inspector and as a dot on the canvas.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `author` | string | | Defaults to `agent`. |
| `author` | string | | |
| `nodeId` | string | yes | |
| `text` | string | yes | |
### `resolve_feedback`
Mark notes on a layer resolved, with a short reply saying what you changed. Without `commentId` every open note on the layer is resolved. `delete` removes instead.
Mark notes on a layer resolved, with a short reply saying what you changed. Without commentId every open note on the layer is resolved. `delete` removes instead.
| Argument | Type | Required | Notes |
|---|---|---|---|
@@ -546,8 +649,7 @@ Mark notes on a layer resolved, with a short reply saying what you changed. With
### `select_nodes`
Select nodes on the page the user is viewing so they can see what you mean; zoom: true also frames them in the viewport. An empty list clears the selection.
Select nodes on the page the user is viewing so they can see what you mean; zoom: true also frames them in the viewport (at most 100%). An empty list clears the selection. For another page or a closer zoom use set_viewport.
| Argument | Type | Required | Notes |
|---|---|---|---|
@@ -555,6 +657,20 @@ Select nodes on the page the user is viewing so they can see what you mean; zoom
| `zoom` | boolean | | |
### `set_viewport`
Move the user's view: switch to pageId (as clicking it in the page list does) and fit nodeIds or a world rect, optionally at an explicit zoom (0.01 to 256). With only zoom it zooms about the view's centre. Refused while the user is moving the canvas (within 10 s of their last pan or zoom) unless force: true. Returns the new viewport ({pageId, rect: [x, y, w, h] in world units, zoom}); get_basic_info and get_selection report the current one.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `force` | boolean | | Move the view even if the user is panning or zooming. |
| `nodeIds` | array of string | | Nodes to fit in the view. |
| `padding` | number | | Screen margin when fitting, in px (default 64). |
| `pageId` | string | | Page to show; defaults to the page of nodeIds, else the current one. |
| `rect` | array of number | | World rect [x, y, width, height] to fit, instead of nodeIds. |
| `zoom` | number | | Explicit zoom level (1 = 100%); centres the nodes or rect at this zoom instead of fitting. |
### `undo`
Undo the last change on a page (the user's or an agent's).
@@ -569,8 +685,6 @@ Redo the last undone change on a page.
Call when done creating or editing. Saves the project.
| Argument | Type | Required | Notes |
|---|---|---|---|
| `nodeIds` | array of string | | Optional nodes you worked on. |
Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

+71
View File
@@ -0,0 +1,71 @@
# Annotations: notes with leader lines that explain a design
## Why (user request, 2026-10-21)
Teams annotate designs in Figma with callouts and arrows that explain what each part does: business rules, behaviour, states, data sources, edge cases. They are toggled on for review and handoff and off for presenting. PaperCraft has comments (threads, open/resolved) but nothing that documents a design in place.
## Model
* An **annotation** belongs to a page: `{ id, target: NodeId (or a point), anchor: side or offset on the target, label: short title, body: markdown text, category, number, position: where the note sits on the canvas, author: user | agent, created }`. Stored in the page file under `annotations` (serde default; old pages load unchanged).
* **Categories** are project-level, editable: default `Business rule`, `Behaviour`, `Content`, `Data`, `Accessibility`, `Dev note`, each with a colour (theme palette) and icon.
* Annotations survive moves and resizes of the target (anchor is relative); deleting the target keeps the annotation detached with a warning badge.
## Classification drives the look (user, 2026-10-21)
* The **category is the only styling input**. Icon, colour, badge shape and default label prefix come from the category; an annotation stores no icon or colour of its own. Changing a category's colour or icon restyles every note in it.
* Categories carry a short **type key** used everywhere (`rule`, `behaviour`, `content`, `data`, `a11y`, `dev`); custom categories get a key too.
* **Hiding information**, three levels, all undo-free view state (not saved in the design):
* per note: collapse to its number badge only (click the badge to expand);
* per category: show/hide from the category filter;
* global (⌘⇧A cycles; ⇧A is Add auto layout): full notes → badges only → hidden.
* Exports and Present mode use "hidden" unless chosen otherwise.
## Templates (user, 2026-10-21)
People annotate differently per project and even per page (a product spec, a dev handoff, an accessibility review). A **template** says which kinds of notes are wanted and what each should contain.
* `AnnotationTemplate { id, name, categories: [ { key, enabled, prompt: short guidance for what this note should say, fields: [name] (optional structured lines, e.g. "Applies when", "Owner") } ], display: full | badges }`.
* Stored in `design.json` (project-level list); the **project default** is one template, and a **page can override** it (`page.annotation_template`, serde default). New categories added in a template become available project-wide.
* **Built-in templates** (editable copies, not locked): `Product spec` (rule, behaviour, content, data), `Dev handoff` (behaviour, data, dev, a11y), `Accessibility review` (a11y with fields "Issue", "WCAG", "Fix"), `Content review` (content with "Tone", "Max length"), `Minimal` (rule only).
* **UI**: the Annotations side view header has a template picker (project default or this page) and a "Customize…" modal: toggle categories, edit name/colour/icon/key, edit each category's guidance and fields, duplicate/reset a template. The Annotate popover only offers the template's enabled categories, and shows the fields as labelled lines.
* **Ask AI**: an "Annotate with AI" button in the side view (and a chat suggestion "Annotate this page") sends a prompt to the chat: annotate the selected frame or the page using the active template. The agent reads the template with one cheap call.
* MCP: `get_annotation_template {pageId?}` returns compact `[[key, guidance, fields]]` for the enabled categories (a few hundred tokens); `annotate` rejects types the page's template disables (error lists the allowed keys) and accepts `fields` as `"Name: value"` lines inside `text`. `set_annotation_template {pageId?, template}` switches it.
## Cheap for agents
* One tool call can add many notes: `annotate {notes: [{node, text, type}]}` where `node` is a node id or a layer name on the active page, `text` is the note (first line becomes the label, the rest the body), `type` is the category key (default `rule`). No positions, icons or colours: placement is automatic (beside the target, outside its frame, stacked without overlap).
* `get_annotations` returns compact rows `[n, node, type, text]`, not full objects; `{full: true}` for everything.
* `update_annotation` / `delete_annotations` take ids or numbers ("frame Sign in #3").
* The tool description stays under ~60 words.
## Canvas
* A note is a small card (number badge, label, first lines of the body) connected to its target by a **leader line**: elbow or straight, ending in a dot or arrow on the target's anchor, plus a thin outline around the target while hovered.
* Notes are draggable; the line re-routes (reuse the connector router, `src/connector.rs`).
* **Toggle**: View → Annotations (⌘⇧A) shows or hides all; a filter per category; never drawn in Present mode or exports (notes live only in the editor overlay; an export option to include them is a later item).
* Numbering is per frame, in reading order, so a frame reads "1, 2, 3…".
## UI
* **Annotate tool** (N; A is the Frame tool): click a layer, type the note; or select layers → right-click → Annotate.
* **Annotations side view**: list per frame with number, category chip, label; click to select and zoom; filter by category; edit inline.
* **Inspector**: an Annotations section for the selected layer.
## Agents and handoff
* MCP: `annotate` (batch, see "Cheap for agents"), `get_annotations`, `update_annotation`, `delete_annotations`; classified in `edits_doc`.
* `get_design_spec` and `get_jsx` include annotations as comments (`// 1 Business rule: …`), so code generated from a frame carries the rules.
* Chat: the `@ Selection` context includes the selected layers' annotations; the agent can be asked to "annotate this screen".
## Mock-ups
`PaperCraft` design file, page `Annotations`: `Canvas / Annotated frame` (several categories, leader lines, numbering), `Canvas / Annotations hidden`, `Panel / Annotations` (344x1440), `Inspector / Annotation` (344x1440), `Popover / New annotation`.
## Acceptance
* Add, edit, move, hide/show, filter, delete annotations; undo for each.
* Moving or resizing a target keeps the leader line attached; deleting it detaches the note with a badge.
* Old projects load unchanged; page files without `annotations` stay byte-identical on save.
* Exports and Present mode never include annotations.
* MCP tools round trip; `get_design_spec` includes them.
* Screenshot check against the mock-ups; tests for model, anchoring, numbering, serialization, MCP.
+24
View File
@@ -0,0 +1,24 @@
# Tasks
Stop on failure. UI tasks go to Sonnet, never Haiku. Agents clean up after themselves.
## Wave 1 (with chat-agents wave 1)
- [x] 1. **Mock-ups** on page `Annotations`. Sonnet.
## Wave 2 (parallel with chat-agents wave 2)
- [x] 2. **Model and storage**: `Annotation`, categories in `design.json`, page field (serde default, byte-identical save for old pages), anchoring relative to target, numbering per frame in reading order, undoable edits through `Editor`. Tests. Sonnet.
- [x] 3. **MCP tools** `add_annotation`, `get_annotations`, `update_annotation`, `delete_annotations`; `get_design_spec` / `get_jsx` include them as comments; classified in `edits_doc`. Codex Sol (Sonnet if unavailable).
- [x] 3b. **Templates**: model in `design.json` + page override, built-ins, `get_annotation_template` / `set_annotation_template`, `annotate` validates against the page's template. Sonnet (after 3).
## Wave 3 (after wave 2 and the mock-ups)
- [x] 4. **Canvas**: note cards, leader lines (connector router), drag, toggle ⇧A, category filter, hidden in Present and exports unless asked. Sonnet.
- [x] 5. **Annotate tool, side view (template picker, Customize modal, Annotate with AI), inspector section, popover**. Sonnet.
## Wave 4
- [x] 6. **Review** (Codex Sol, read-only) and fixes (Sonnet); chat `@ Selection` context includes annotations.
- [x] 7. **Docs** (Haiku): `docs/annotations.md`, README, `docs/agents.md`, ROADMAP, PROGRESS.
Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 233 KiB

+38
View File
@@ -0,0 +1,38 @@
# Chat agents: any agent, found reliably, and a picker that scales
## Why (user report, 2026-10-21)
* Claude Code and Codex show "Not found on PATH" although both are installed in `~/.local/bin`. Root cause: an app opened from the Dock or Finder gets the minimal macOS PATH (`/usr/bin:/bin:/usr/sbin:/sbin`); `launchctl getenv PATH` is empty. The user's login shell also finds `pi`, `opencode`, `gemini`, `goose` (`/opt/homebrew/bin`) and `cursor-agent` (`~/.local/bin`).
* The setup state offers `npm install -g …` as the way to install agents. Claude Code and Codex have their own installers; PaperCraft should not tell people how to install agents at all.
* Only two agents are supported; the user wants every popular agent, generically.
* The agent picker popup has no shadow and overlaps the setup card; the Settings → Chat page has broken spacing, padding and height (fields not aligned, the page bottom cut off).
* Sending a message did nothing: no `chats/` folder was created, no error was shown.
* The composer allows one `@ Selection` chip; the user wants several.
## Scope
1. **Find agents like the shell does.** At startup (native, off the UI thread), resolve the login shell PATH once: `$SHELL -l -c 'printf %s "$PATH"'` with a 3 s timeout; merge with the process PATH and common folders (`~/.local/bin`, `/opt/homebrew/bin`, `/usr/local/bin`, `~/.cargo/bin`, `~/.bun/bin`, `~/.npm-global/bin`, Volta and nvm current bins). Use it for agent detection and for spawning agents (set `PATH` on the child). A path override in Settings still wins.
2. **ACP backend** (`src/chat/acp.rs`): a generic Agent Client Protocol client (JSON-RPC 2.0 over the agent's stdio): `initialize`, `session/new` with `cwd` = project folder and `mcpServers` = PaperCraft's server (HTTP entry when the agent advertises `mcpCapabilities.http`, else a stdio entry running the bundled `papercraft-mcp` bridge with `PAPERCRAFT_MCP_PORT`), `session/prompt` with text (and image) content blocks, streaming `session/update` notifications mapped to our `Event`s (agent message chunks → Text, thought chunks → Thinking, tool_call / tool_call_update → ToolStart/ToolEnd, plan → Plan items), `session/cancel` for Stop, `session/request_permission` answered from our approval flow (papercraft tools allowed; destructive ones and any non-papercraft tool ask the user), `session/load` to resume when supported. The PaperCraft skill text goes in as the first prompt's leading context (ACP has no system prompt field).
3. **Agent registry, as data** (`src/chat/agents.rs`): `{ id, name, detect: binary name, launch: command + args, kind: Native | Npx, docs_url }`. Native entries are found on the resolved PATH: Gemini CLI (`gemini --acp`), Cursor (`cursor-agent acp`), OpenCode (`opencode acp`), Goose (`goose acp`), Kimi (`kimi acp`), Devin (`devin acp`), Junie (`junie --acp=true`), Mistral Vibe (`vibe-acp`), Hermes (`hermes acp`), OpenHands (`openhands acp`), Stakpak (`stakpak acp`), VT Code (`vtcode acp`), Poolside (`pool acp`), Droid (`droid exec --output-format acp-daemon`). `npx`-launched entries (Qwen Code, Kilo, Cline, Auggie, Copilot CLI, Qoder, Codebuddy, Pi via `pi-acp`, Claude/Codex via their ACP adapters) are listed as available but off until the user enables them once, because enabling runs code fetched by `npx`. Claude Code and Codex keep their direct adapters (already proven) and are the default for them. Exact flags are verified against each installed agent's `--help` where installed; the rest keep the documented command and fail with the agent's own error.
4. **Custom agent**: name + command + args (ACP over stdio). No provider lists beyond the registry.
5. **No install instructions.** A missing agent shows "Not found" plus "Set path…" and a link to the agent's own docs (`docs_url`), nothing else.
6. **Agent picker becomes a panel**, not a dropdown: opened from the agent chip, sized like the chat column (overlay with shadow and a backdrop), sections Detected, Enable (npx), API endpoints, Custom, a search field, and per row: icon, name, status chip (Ready, Needs enable, Not found, Signed out if detectable), version, path. Clicking a row selects it for this chat.
7. **Settings → Chat** redesign with the same list (one row per agent with a details disclosure: path override, args override, enable), API endpoints as compact rows with an edit disclosure, consistent 16/24 px padding, labels aligned on one grid, the page scrolls instead of being cut off.
8. **Setup state** in the chat column: one card "Connect an agent" listing detected agents to pick from (usually already some), plus "Add an API endpoint" and "Add custom agent"; no install commands.
9. **Send bug**: reproduce, find the root cause, fix, and add a regression test; any start failure must show an error row in the thread (never a silent no-op) and keep the typed text.
10. **Multiple selections**: each `@` adds a chip (selection at that moment, labelled by layer names); chips stack, can be removed one by one; all are sent as context lines with node ids.
## Not in scope
* Installing agents.
* ACP terminal/file-system client methods beyond what PaperCraft needs (answer `fs/*` and `terminal/*` requests with "not supported" unless the agent requires them to work; most agents use their own file tools).
## Acceptance
* With the app launched from the Dock: Claude Code, Codex, Pi, OpenCode, Gemini, Goose and Cursor are detected on this machine.
* A turn with Gemini CLI, OpenCode, Goose and Cursor (each installed here) creates an artboard through PaperCraft's tools via ACP; a Pi turn works after enabling `pi-acp`.
* Stop cancels an ACP turn within 3 s.
* Picker panel, Settings → Chat and the setup state match new mock-ups at 1440p and 1280x800; nothing clipped; shadows on overlays.
* Sending a message always either starts a turn or shows an error row.
* Three `@` chips can be added and removed independently.
* Tests: PATH merge, registry detection with a fake PATH, ACP JSON-RPC handshake and update mapping against a fake agent process (recorded fixture), permission flow, cancel.
+23
View File
@@ -0,0 +1,23 @@
# Tasks
Stop on failure. UI tasks go to Sonnet (or Codex Sol), never Haiku. Each agent cleans its temp homes, logs and drivers when done; one shared `target/`.
## Wave 1 (parallel)
- [x] 1. **Mock-ups** on page `Chat agents` (agent panel, setup, Settings / Chat, multiple selections). Sonnet.
- [x] 2. **PATH resolution, no install hints, send bug, multiple `@` chips** (spec items 1, 5, 9, 10). Sonnet.
## Wave 2 (after wave 1)
- [x] 3. **ACP backend** `src/chat/acp.rs`: JSON-RPC client, session/new with PaperCraft's MCP server (HTTP or the `papercraft-mcp` stdio bridge), prompt, update mapping, permission flow, cancel, load. Fake-agent fixture tests; real turns with Gemini CLI, OpenCode, Goose and Cursor (installed here). Sonnet.
- [x] 4. **Agent registry and custom agents** `src/chat/agents.rs`: data table, detection on the resolved PATH, npx enable state, custom agent entries in ChatPrefs, BackendKind/Backend for ACP agents. Codex Sol (Sonnet if unavailable).
## Wave 3 (after wave 2 and the mock-ups)
- [x] 5. **Agent panel and setup state** in the chat column (spec items 6, 8). Sonnet.
- [x] 6. **Settings → Chat redesign** (spec item 7). Sonnet.
## Wave 4
- [x] 7. **Review** (Codex Sol, read-only), fixes (Sonnet).
- [x] 8. **Docs** `docs/chat.md` (agents, ACP, custom), README. Haiku.
+24
View File
@@ -0,0 +1,24 @@
# Gaps found while driving PaperCraft on the Interview project (2026-10-21..23)
Observed by the orchestrating agent and its subagents through MCP / papercraft-cli on the user's Mac.
## MCP / agent side
1. `get_screenshot` never draws annotations, so no agent can verify note placement; every check needed a macOS screen capture of the live window.
2. No tool to switch the page the user is viewing or to set the viewport (zoom / pan / fit a rect); `select_nodes {zoom:true}` only works on the active page and caps zoom at 1.0.
3. Agents can't see what the user sees (viewport rect, zoom, selection on screen) except `get_selection`.
4. `~/.local/bin/papercraft-cli` was stale (schema/list missing new tools) while `call` reached the app — CLI and app versions drift with no warning.
5. Applying a code change to the running app needs quit + reinstall + reopen (no dev reload / no "restart and reopen project" path).
6. Long batched edits (thousands of bindings, renames) run as many separate calls; no progress shown to the user in chat mode for CLI-driven agents beyond the "Working…" pill.
7. Cleanup agents made destructive mistakes (deleted button copies, lost icons on LG buttons) with no per-agent review/diff of what changed; undo is global, not per agent run.
8. Tidy/placement was blind to zoom-dependent card size (fixed), to screens inside sections (fixed), and lines detoured inside screens (fixed).
9. `get_tree_summary` depth semantics surprised scripts (rows under "Screens" needed depth 3).
## App / 0.6.2 follow-ups already noted
- Run card stale after undo; lingering "Working" pill; Stop reported as error.
- No-GPU panic should be a readable error; Wayland clipboard without DISPLAY.
- Email truncation (no text-overflow ellipsis).
- 13.7 s open once after install (first run, not reproduced).
10. `find_nodes` text search returned nothing for strings that exist on the page (Candidate redesign agent, 2026-10-23) — reproduce and fix.
11. `get_tree_summary` truncates long text to ~40 chars with no option for full text, so copy review across many screens is impossible without per-node reads.
12. `annotate {tidy:true}` with no notes returns `[]`, which agents read as failure (fix in A1: `{tidied: n}`).
13. When the app stops mid-run the CLI silently falls back to offline writes; several agents then write the same project files concurrently with no lock (lost-update risk). Also a CLI call during app start-up reports "app not running" and goes offline.
+82
View File
@@ -0,0 +1,82 @@
# Chat ↔ canvas: research
How canvas + AI products let a user act through chat and point at the canvas, and what PaperCraft already has. Researched 2026-10-23. Secondary sources (forums, reviews) are marked; treat their details as approximate.
## 1. What PaperCraft does today (code)
* **One path to the canvas: tool calls.** Every backend (Claude Code, Codex, ACP, API endpoints) edits only through the 69 MCP tools. CLI/ACP agents reach them over HTTP MCP (`src/mcp/server.rs`); API endpoints call `crate::mcp::exec` on the UI thread (`src/chat/tools.rs`, `ToolDispatch`). The user can't trigger anything in-process from chat except sending text.
* **Context the agent gets:** `skills/papercraft/SKILL.md` (14 KB) plus the project name and folder (`ChatState::system_prompt`, `src/ui/chat.rs:602`). There is no design-system digest, no viewport and no screenshot of what the user sees.
* **Pointing:** the `@ Selection` chip (⌘L), `add_selection` in `src/ui/chat.rs`. It sends `[Selection] <label> (<node ids>)` plus the annotations on those layers (`selection_notes`). It has no image, no region and no point. Annotations' "Annotate with AI" (`src/ui/annotations.rs:557`) is the one canvas-to-chat hand-off: it drafts a prompt, adds a chip and switches to Chat mode, but does not send.
* **Showing agent work:** the activity pill (`agent_pill`, `AGENT_PILL_FRAME_MS`, `agent_verb` in `src/ui/mod.rs:310-360`) shows a verb only, with no location. Canvas follow (`follow`/`pan_to`, `src/ui/chat.rs:1056`) pans to the node in the call args, on the active page only. The review overlay (`review_overlay`, `src/ui/mod.rs:1929`) draws added/changed/removed outlines, but only after the run ends and is opened for review (docs/chat.md, Limits).
* **Runs:** `src/runs.rs` has one global `Tracker`. A run is closed by a 30 s idle, `finish_working_on_nodes` or the end of a chat turn. Each run has auto-versions per page, plus `revert`, `revert_all` (checkpoint "Restore to here") and `revert_change` (one change). The chat has a Checkpoint row and a Run card (Review/Revert/Accept). MCP calls carry no client identity (`call_tool` ignores `RequestContext`), so parallel subagents land in one run (gap 7).
* **Screenshots:** `get_screenshot` renders nodes with `io::png::render`. Annotations are an egui overlay (`src/ui/annotations_canvas.rs`), so they never appear (gap 1). `src/model/annotation_layout.rs` (new) already gives pure card sizes, placement and leader routing in world units.
* **Camera tools:** `select_nodes {zoom}` works only on the active page and fits with a 1.0 zoom cap (`src/mcp/exec.rs:5266`). There is no page switch and no viewport read.
* **Design-system data that already exists:** `get_variables` (vars, tokens, modes; css/json/tailwind), `get_components` (page mains with use counts plus `ed.library_docs` mains), `get_annotation_template`, `lint_design {fix}` with `lint::autofix` (rules: text-size, type-scale, spacing-grid, touch-target, layer-name, hard-coded-color), `get_design_spec`, `diff_frames`, `swap_instance`, `bind_variable`. There are no component variants in the model.
* **Rendering stack:** custom `egui_winit` + `egui_wgpu` (`src/app.rs`, `src/render/frame.rs`), not eframe, so `ViewportCommand::Screenshot` is not handled. `render/gpu.rs` already has `start_readback` (texture to buffer).
## 2. Products
### tldraw: agent starter kit, Make Real, fairies
* Agent context: the user message, the **selection, the viewport**, a screenshot of the agent's view, a simplified shape list in view, **off-screen shapes summarised as clusters (bounds + count)**, recent user actions, and lint warnings. The user can add shapes, **a point or an area** as extra context. ([starter kit](https://tldraw.dev/starter-kits/agent), [AI docs](https://tldraw.dev/docs/ai))
* The agent **moves its own viewport** to look at parts of the canvas. Actions stream in and apply one at a time. Each action shows in chat with an icon and a one-line description. **Modes** (working, critique) limit the tool set per task. ([v4.4 release](https://tldraw.dev/releases/v4.4.0))
* Make Real: select shapes, click one button, and the selection's screenshot goes to the model. You iterate by drawing on top of the result. ([talk summary](https://gitnation.com/contents/make-real-tldraws-accidental-ai-play))
* Fairies (Dec 2025 experiment): agents shown as small characters on the canvas. **Where an agent is shows what it is working on**, and several run concurrently on shared space. ([talk](https://gitnation.com/contents/agents-on-the-canvas-with-tldraw), [tldraw offline](https://tldraw.dev/blog/tldraw-offline))
* Works: viewport and region as first-class context, a cheap off-screen summary, visible presence.
### Figma: AI, Make, MCP
* Quick actions (⌘K): Rename layers (only default-named layers), Make prototype, Make designs. These are **one-click scoped actions on a selection**, with no chat. ([quick actions](https://help.figma.com/hc/en-us/articles/23570416033943-Use-quick-actions), [Figma AI](https://www.figma.com/blog/introducing-figma-ai/))
* First Draft can't use your own design system; it uses Figma-built libraries. ([help](https://help.figma.com/hc/en-us/articles/23955143044247))
* **Make kits**: components and styles bundled with **usage guidelines**, so the model learns *how* to use the system, not just what is in it. Attachments (PDF, CSV/JSON, SVG) ground prompts in real data. ([blog](https://www.figma.com/blog/introducing-make-kits-and-make-attachments/))
* Best practices for AI to read a DS: semantic slash names, larger reusable blocks (cards, headers) over atoms, auto layout with sizing intent, full variant and property sets, variables for every color, space, radius and type, and a usage-examples page. ([help](https://help.figma.com/hc/en-us/articles/38978644498199-Best-practices-to-help-Figma-AI-understand-your-design-system))
* Failure mode reported by users: Make "only recognises a random subset of components" and "created new ones that looked like my components". (forum, 2025: [1](https://forum.figma.com/suggest-a-feature-11/figma-make-not-using-my-library-components-42235/index1.html), [2](https://forum.figma.com/share-your-feedback-26/figma-make-library-support-42423)) The lesson: putting the library "in context" is not enough. Reuse must be checked.
* Dev Mode MCP: `get_variable_defs` returns the variables used **in the selection**, Code Connect maps nodes to code components, and `create_design_system_rules` writes a rules file for agents. Selection-based prompting works only with the desktop server. ([guide](https://github.com/figma/mcp-server-guide))
* Works: selection-scoped context, DS rules as a compact digest, one-click actions.
### Cursor Design Mode (browser)
* Click an element to target it. **Shift+drag selects an area.** You can draw circles or boxes over a **frozen frame** of the viewport, and voice is accepted. ⌘L adds to chat, ⌥+click adds without the comment step. The agent gets element identity (xpath, component, computed styles) **plus a screenshot**. You can queue several edits while agents run. ([docs](https://cursor.com/docs/agent/design-mode))
* Agent checkpoints: a timeline in the chat, preview at a point, restore. Per-file Keep/Undo appears in the review panel. Reject bugs that deleted whole files show the risk of coarse undo. ([forum](https://forum.cursor.com/t/per-change-keep-undo-buttons-missing-after-agent-edits-only-undo-all-available/158983), [forum](https://forum.cursor.com/t/cursor-deletes-entire-file-when-changes-are-rejected/151760))
* Pain points (forum): a new pick overwrote the previous one, and the chip always lands at the end of the prompt. ([1](https://forum.cursor.com/t/new-visual-editor-prevents-adding-multiple-elements-in-chat-box/145962), [2](https://forum.cursor.com/t/insert-browser-tab-element-selection-at-cursor-in-composer-not-always-at-end/167268))
* Works: identity + pixels together, area selection, multiple chips.
### v0 design mode / Lovable visual edits
* v0: hover highlights and click selects. The **selected element shows as a badge in the prompt**, and the prompt is scoped to it. Direct panel edits are free; prompts cost tokens. A later version added annotations on elements **sent as one batched prompt**. ([v0 docs](https://v0.app/docs/design-mode), [changelog summary](https://www.createwith.com/tool/v0/updates/v0-launches-design-mode-with-visual-editing-and-layer-management))
* Lovable: select one or more elements (⌘-click for multi), then describe the change. The selection is the context. ([docs](https://docs.lovable.dev/features/preview-toolbar))
* Works: two lanes, deterministic edits for free and prompts for intent. Comments become a batch prompt.
### Google Stitch
* **Annotate**: draw a box around an element, type in a bubble, and only that element changes. You can also circle or write notes on the screen. **Variations**: select a screen and generate N (default 3) side by side, with a creativity range. "Create variant" keeps the original. ([review](https://designproject.io/blog/google-stitch-review/), [guide](https://tutorialsdojo.com/what-google-stitch-actually-does-and-where-it-falls-short/), secondary)
* Works: on-canvas prompt bubble, variations as siblings on the canvas, never overwriting.
### Canva Magic Edit
* Brush the area, then prompt one change per pass. Canva advises against giving size in words; the brushed area carries it. ([help](https://www.canva.com/help/using-magic-edit/))
* Works: the region carries the spatial intent, so the prompt stays short.
### Miro Sidekicks, Framer, Excalidraw, Penpot
* Miro: select clusters, then ask a task-specialised "Sidekick" (persona/mode) to transform them, for example into sticky notes. It has an MCP server for outside agents. ([TrustRadius](https://tr-web.dev.trustradius.com/products/miro/details), [MCP](https://miro.com/pl/ai/mcp/), secondary)
* Framer Wireframer: prompt a layout, then keep iterating in chat or jump to the canvas. Workshop builds components that match the site's style. ([update](https://www.framer.com/updates/wireframer))
* Excalidraw: AI is in the paid tier (text-to-diagram, wireframe-to-code). Community MCP servers give agents a live canvas. ([listing](https://www.stork.ai/de/excalidraw), [mcp_excalidraw](https://docsearch.algolia.com/mcp/docs/repo/yctimlin/mcp_excalidraw))
* Penpot: experimenting with MCP for agents that read and edit design data. ([summary](https://mcpmarket.com/es/news/9fad1b76-0f9d-4411-b557-348e8f85888c), secondary)
## 3. Patterns, ranked by value for PaperCraft
| Pattern | Seen in | PaperCraft today | Gap |
|---|---|---|---|
| Selection as scoped context, with pixels | Cursor, v0, Lovable, Figma MCP | `@ Selection` ids + notes | no image, no region |
| Area/lasso or point as context | Cursor, tldraw, Stitch, Canva | none | missing |
| One-click scoped actions on selection | Figma ⌘K, Lovable panel | Annotate menu only | add Optimize, Bind tokens, Rename, Fix lint |
| Deterministic lane vs model lane | v0, Lovable | `lint_design {fix}` exists, not in UI | expose without the LLM |
| DS digest in context + reuse check | Figma Make kits, `create_design_system_rules` | only the skill text | add a digest and a reuse lint |
| Agent viewport + presence | tldraw agent, fairies | pan follow + a verb pill | show where; let the agent read and set the view |
| Live change outlines during a run | tldraw (streamed), Cursor inline diff | after the run only | draw live |
| Per-run timeline + revert one | Cursor checkpoints | yes (runs.rs) | per-client runs; fix stale card |
| Variations side by side | Stitch | none | duplicate + keep one |
| Comments batched into one prompt | v0 annotations | feedback + annotations exist | "Send open notes to chat" |
| Voice | Cursor, Stitch | none | P2 |
## 4. Conclusions
1. The best tools send **identity + pixels + region**. PaperCraft sends identity only. Adding a screenshot crop to chips and an area pick is the biggest lever for "point at the canvas".
2. Split actions into **two lanes**. Deterministic actions (lint autofix, bind hard-coded colors to the nearest variable, swap copies for instances, rename default layers) run in-process through `runs::Tracker::call`, so they land as a reviewable run with no model. Intent actions (Optimize layout, Variations, Make consistent) send a scoped prompt from a template.
3. A DS in context is necessary but not enough (the Figma Make complaints). Pair the digest with a **reuse check**: lint "looks like component X but isn't an instance".
4. Presence beats a pill. Outline the nodes the current run touched, live, and say where the agent is (page, frame).
5. Ghost previews in egui are costly (a second document render path). The cheaper equivalent already exists: apply live, show the run outlines, Accept/Revert per run or per change. Variations give "preview" by construction: siblings on the canvas, keep one.
+124
View File
@@ -0,0 +1,124 @@
# Chat ↔ canvas: spec
What and why for (a) the gaps in `gaps-found.md`, (b) a chat that acts and points at the canvas, and (c) chat grounded in the project's design system. Research and the current-state map are in `research.md`. Cost: **S** < 1 day, **M** 1–3 days, **L** > 3 days. Everything here uses egui primitives already in the tree (Area overlays, painter, popups) and no new crates.
## Principles
* **Two lanes.** Deterministic actions run in-process with no model. Intent actions send a scoped prompt. Both go through `runs::Tracker::call`, so each lands as one reviewable, revertable run.
* **Identity + pixels + region.** What the user points at goes to the agent as node ids, a crop image, and a world rect.
* **Reuse before draw.** The agent sees the design system every turn, and a lint flags work that should have been an instance or a token.
* **Never steal the camera.** Agent camera moves obey the existing `SELF_FOLLOW_QUIET` rule (`src/ui/chat.rs`).
## P0
### P0.1 Annotations in screenshots (gap 1) — S/M
`get_screenshot {annotations?: bool}`. When true, the image includes note cards, badges and leader lines for notes whose target is inside the captured roots.
* How: clone the page doc, add each card as temporary frame + text nodes at `annotation_layout` placement (`card_size`, the placement and routing functions), add leader lines as path nodes, then call the existing `io::png::render`. Captured bounds grow to include the cards. No second renderer.
* Accept: a test renders a frame with 2 notes, and the PNG bounds include both cards. With `false` or omitted, the output is byte-identical to today. `docs/annotations.md` and `skills/papercraft/references/tools.md` are updated.
### P0.2 Viewport: read, set, switch page (gaps 2, 3) — S
* `get_basic_info` and `get_selection` gain `viewport: {pageId, rect:[x,y,w,h] world, zoom}` from `ed.camera` and `ed.viewport`.
* New tool `set_viewport {pageId?, nodeIds? | rect?, zoom?, padding?}`. It switches the active page when `pageId` differs (as the page list does) and fits the nodes or rect. `zoom` sets an explicit level within the canvas's min/max, instead of the 1.0 cap in `select_nodes`. It is refused with `"user is moving the canvas"` when the camera moved within `SELF_FOLLOW_QUIET`, unless `force:true`.
* `select_nodes` keeps its behaviour. Its error on another page points to `set_viewport`.
* Accept: tests for the page switch, fit, explicit zoom and the quiet refusal. The tool count in `docs/agents.md` is updated.
### P0.3 Runs per agent client + per-run review (gap 7, run-card follow-ups) — M
* `PaperServer::call_tool` reads `context.peer.peer_info()` (rmcp `clientInfo.name`/`title`) and the session id, and passes `client` on `Call`. Chat turns pass their chat id. `Tracker` keeps one open run per client key, instead of one global `open`. `Run` gains `client: String` (serde default `""`).
* Agent view and chat: each run shows its client ("Claude Code · subagent 2"). Revert of one run is already in `runs::revert`; refuse it when a later run touched the same nodes, and offer "Restore to here" (`revert_all`).
* Fix the run card going stale after undo (refresh `ReviewDiff` on `history.generation()` change). The "Working" pill clears on turn end. Stop shows as "Stopped", not an error.
* Accept: two MCP sessions editing at once give two runs with the right counts. Reverting one leaves the other's nodes. The `tests/mcp.rs` and `runs.rs` tests pass.
### P0.4 Design-system context in every chat turn (user request) — M
Today `system_prompt()` (`src/ui/chat.rs:602`) is the skill text plus the project name. Add a **DS digest**, built in-process from data the tools already expose:
* **Variables/tokens**: collection → group → names, with modes. Values only for colors, listed as `name=#hex/#hex(dark)`. Tokens (space, radius, type) as scales. Source: same as `get_variables`.
* **Components**: page mains and enabled-library mains (`get_components`, `ed.library_docs`), as `componentKey · name · w×h · uses`. Sorted by uses, then name.
* **Libraries**: enabled libraries with their update status (`libraries::status`).
* **Annotation template**: the active template's enabled types (`get_annotation_template`).
* **Rules line**: "Reuse: use `create_instance`/`swap_instance` for anything matching a component; colors must be `var(--…)`; spacing on tokens."
Budget and caching:
* Cap the digest at ~1,500 tokens (≈6 KB, a named constant). When over the cap, keep the top components by use, collapse variable groups to counts, and append "call get_components / get_variables for the rest".
* Cache it on `ChatState`, keyed by a hash of (variables, tokens, component keys + names, enabled library versions, template id). Rebuild only on a key change.
* API backend: the digest goes in the system prompt, in its own cache-breakpoint block after the skill (Claude host). CLI/ACP backends: they get the system prompt once per session, so when the hash changes between turns, prepend `[Design system changed] <digest>` to the next user message.
* Settings → Chat gets a toggle, "Send design-system summary" (default on), because it costs tokens.
**Reuse check** (the Figma Make failure mode):
* New lint rule `not-an-instance`: a frame whose structure matches a component main (same child kinds/count, size within 4 px, same text roles) but that is not an instance. Its fix is "swap_instance with componentKey X". Computed with the same structure walk `diff_frames` uses.
* `lint_design {fix:true}` does **not** auto-swap; swapping is a user action (P0.5).
Accept: a unit test of the digest for a fixture project, checking it is under the cap with top-N kept. A test that the hash is unchanged when unrelated nodes move. A lint test where a hand-made copy of a button is flagged and an instance is not. The context meter shows the added tokens.
### P0.5 Scoped actions on a selection: "Optimize" menu (user request) — M
An **Actions** menu on the selection. It opens from the canvas right-click menu (extend `canvas_menu` in `src/ui/annotations.rs:438`, which today has only "Annotate"), from an "Actions" chip next to `@ Selection` in the composer, and from the command palette (`src/ui/palette.rs`). It works in Design and Chat modes.
Deterministic lane (in-process, no model, one run each, instant):
| Action | Runs | Exists |
|---|---|---|
| Fix lint here | `lint_design {nodeId, fix:true}` | yes |
| Bind to tokens | for each hard-coded color, space or radius in the subtree, `bind_variable` to the nearest variable/token within a tolerance; the rest are listed in the result | bind exists; nearest-match is new (S) |
| Use components | for each `not-an-instance` hit, `swap_instance` | needs P0.4 lint |
| Rename layers | `rename_nodes` for default names (`Frame 12`, `Text`) from text content or role | new heuristic (S) |
| Annotate | opens the existing popover | yes |
Intent lane (sends a prompt to chat with a selection chip and crop; switches to Chat mode like "Annotate with AI" does, but **sends**, because the action is explicit):
* **Optimize**: "Tighten layout and spacing to the token scale, fix contrast to AA, keep the content. Prefer existing components."
* **Make consistent with DS**: "Replace hand-made parts with instances of the listed components, bind every color and space to variables."
* **Annotate with AI** (existing), **Write states** (empty, loading, error), **Variations ×3** (P1.3).
Prompts live in one const table in `src/ui/chat_msgs.rs`, next to `SUGGESTIONS`.
Review: every action, in either lane, ends as a run, so the existing review overlay, Run card and Revert/Accept apply. A deterministic action shows a toast "Bound 14 colors · Review · Revert".
Accept: each deterministic action has a test on a fixture (counts, one undo step, one run). The intent actions put the right prompt and chips into a sent message (pattern: `ai_prompt_and_chat_hand_off_do_not_send`).
### P0.6 CLI/app version check (gap 4) — S
* `papercraft-cli call`/`shell` compares its own `CARGO_PKG_VERSION` with the app's `serverInfo.version` (`src/mcp/server.rs:39`). On mismatch it prints once to stderr: `papercraft-cli 0.6.1 ≠ app 0.6.2; reinstall the CLI`.
* `list`/`schema` use the app's `tools/list` when the app is running and fall back to the built-in list offline, so new tools show even from a stale CLI.
* Accept: a test with a fake server version prints the warning. `list` against a running app includes a tool absent from the built-in list.
## P1
### P1.1 Point at the canvas from chat: pick and area — M
* The composer gets **Pick** (crosshair; click a layer or Shift+drag an area; Esc cancels) next to `@ Selection`. It does not change the user's selection.
* `SelChip` (`src/ui/chat.rs:201`) gains `rect: Option<[f64;4]>` (world) and `image: Option<path>`. An area chip is sent as `[Area] page P, rect x,y,w,h, contains: <ids…>` plus the crop image. Layer chips also attach a crop.
* Crop: `get_screenshot`'s render of the intersecting roots, clipped to the rect (S; add a `clip` rect to `io::png::render`), with annotations per P0.1. Images go through the existing attachment path (image blocks for API; `.papercraft-chat-tmp/` paths for CLI/ACP).
* ⌥-click on the canvas in Chat mode adds a layer chip directly (Cursor pattern). Chips are inserted at the composer cursor.
* Accept: an area chip lists the contained node ids and attaches a PNG. Several picks give several chips.
### P1.2 Agent presence and live outlines — M
* While a run is open, outline the nodes from the last N calls' `follow_node` keys (`chat_msgs::follow_node`) on the canvas in the accent color, fading over 3 s. Label the newest outline with the verb (`agent_verb`) and the client name: an **agent cursor**. Draw it as one `egui::Area` like `review_overlay`, on any page; a chip "Agent on page X →" shows when the agent works on another page.
* This works for MCP clients too (not only chat), using the per-client run from P0.3.
* After the turn: today's review overlay. During the turn: cheap touched-outlines only (no full diff per call).
* Accept: a UI test shows the overlay present while a run is open and gone 3 s after the last call. There is no repaint loop when idle (respect `AGENT_PILL_FRAME_MS`).
### P1.3 Variations side by side — S/M
* Action "Variations ×3" duplicates the frame 3 times to the right (`duplicate_nodes`, offset by width + 80), names them `<Frame> · Variant A/B/C`, and sends the agent one prompt per variant with distinct directions (compact, spacious, bold). One run.
* Each variant gets an on-canvas tag with **Keep**. Keep deletes the other variants and the original, or replaces the original with the kept one when "replace original" is on. It is one undo step.
* Accept: Keep leaves exactly one frame with the original's name and position.
### P1.4 On-canvas Ask popover — S
* ⌘K on a selection (or "Ask…" in the Actions menu) opens a small prompt box anchored above the selection, using the annotation popover's placement. Enter sends to chat with the chip and crop, Chat mode stays as it is, and the reply streams in the chat column. This gives the Stitch/v0 "type on the element" feel without leaving Design mode.
* Accept: sending from the popover yields the same message as chip + composer.
### P1.5 Progress for long batches (gap 6) — S
* The run tracker exposes `calls` and `added/changed/removed` live. The pill shows `Styling · 212 calls · 1,340 changes` for any client, and the chat's step group shows the count while running.
### P1.6 Notes to prompt — S
* "Send open notes to chat" on a frame: open feedback + annotations of type `todo`/`question` become one batched prompt with a chip (the v0 annotations pattern). It reuses `selection_notes`.
## P2
* **True ghost preview** (L): apply agent edits to a shadow `Document` and draw it translucent over the canvas with Accept/Reject before commit. Costly: every tool would have to target the shadow doc and the renderer composites two docs. P1.2 + P1.3 + run revert cover most of the value; revisit only if users ask.
* **Dev reload** (gap 5, M): `papercraft --reopen` saves, re-execs the new binary and reopens the project and page. It is a menu item in debug builds.
* **Chat modes** (S): "Critique" (read-only tools only, returns a list of issues as annotations) vs "Build". It filters `tool_specs()` per mode, as tldraw does.
* **Sketch to UI** (M): draw on a whiteboard page, then "Make real" sends the crop with the DS digest and the prompt to build a frame next to it.
* **Voice** (M): push-to-talk into the composer through the OS dictation API. It is out of scope until the other items ship.
* **Docs** (S, gap 9): document `get_tree_summary` depth with an example; consider `depth` counting from the artboard.
## Out of scope
* New model backends, in-app agent install, web build chat.
* Gap 8 (fixed). The 0.6.2 platform items (GPU panic, Wayland clipboard, email ellipsis) are tracked in their own specs.
## Order
P0.2, P0.1, P0.6 (small, unblock agents), then P0.4 (digest + lint), then P0.5 (actions, needs the lint), then P0.3. After that P1.1 and P1.2, then the rest.
+19
View File
@@ -0,0 +1,19 @@
# Tasks
Spec: `spec.md`. Stop on failure. One shared `target/`; never install or quit the user's PaperCraft (design agents are using it); test builds use their own `PAPERCRAFT_HOME` / `PAPERCRAFT_MCP_PORT` and are killed by PID. Each agent runs `cargo test --release` and `cargo clippy --release --all-targets` clean before reporting, and deletes its temp homes.
## Wave A (parallel, disjoint files)
- [x] A1. **MCP for agents**: P0.2 viewport (`get_basic_info`/`get_selection` viewport, `set_viewport`), P0.1 `get_screenshot {annotations}`, P0.6 CLI version check + live `list`/`schema`, `annotate {tidy}` returns `{tidied: n}` when no notes are given, `get_tree_summary` depth doc (P2 docs). Files: `src/mcp/exec.rs`, `src/mcp/tools.rs`, `src/io/png.rs`, `src/bin/*cli*`, docs. Tests.
- [x] A2. **Design-system context**: P0.4 digest (new module, cached on ChatState, cap const, system prompt block, CLI/ACP "[Design system changed]" prefix, Settings toggle, context meter) + `not-an-instance` lint rule in `src/mcp/lint.rs`. Tests.
- [x] A3. **Runs per client**: P0.3 (`src/runs.rs`, `src/mcp/server.rs` client name, agent view/run card labels, per-run revert guard, stale card after undo, Working pill clears, Stop not an error). Tests.
## Wave B (after A)
- [x] B1. **Actions menu**: P0.5 both lanes + toast, prompts table in `chat_msgs.rs`.
- [x] B2. **Pointing**: P1.1 Pick/area chips with crops, ⌥-click, P1.4 ⌘K Ask popover.
- [x] B3. **Presence**: P1.2 agent cursor + live outlines, P1.5 live counts in pill, P1.6 notes to prompt.
## Wave C
- [ ] C1. Review (read-only) against spec, fixes (not done yet); docs (done) (`docs/chat.md`, `docs/agents.md`, README tool count); install once design agents are done; live check.
+86
View File
@@ -0,0 +1,86 @@
# Chat: fewer tokens, model and effort, image zoom
## Why
A Claude Code chat turn in the Interview project cost $0.56 (API-equivalent). Most of it was
a 50k-token prompt prefix written to the cache and re-read on every tool step. Measured with
`claude -p --model haiku` and the chat's own flags, before anything the user typed:
| Claude Code flags | Prompt tokens |
|---|---|
| what the chat sent | 42.7k |
| `--disable-slash-commands` (no user skills list) | 31.4k |
| `--setting-sources project,local` (no user CLAUDE.md, hooks, plugins) | 30.6k |
| both + `--tools Read,TodoWrite,ToolSearch` | 20.6k |
`--tools` without `ToolSearch` makes it worse (43.9k): the CLI then loads every PaperCraft
tool schema up front. Bash, Edit, Write and the web tools were never usable anyway: in `-p`
mode only `mcp__papercraft__*` is allowed, everything that needs permission is denied.
The API backend sends all 70 tool schemas (about 77 KB, ~19k tokens) on every request.
## What
1. **Lean Claude Code sessions** (Settings → Chat, on by default): the flags above.
Off keeps the user's own CLAUDE.md, hooks, plugins and skills.
2. **API tool search**: on `api.anthropic.com`, the tools a design turn rarely needs are sent
with `defer_loading` behind the BM25 tool-search tool; the core set stays loaded.
3. **Ask before building**: the chat system prompt tells the agent to ask up to three short
questions (with proposed defaults) when a request is too broad to build well, and to
avoid screenshots it does not need.
4. **Model and effort for Claude Code**: the agent panel's Model/Effort block, today only for
Claude API endpoints, also shows for Claude Code. Claude Code no longer gets the default
API endpoint's model forced on it (a non-Claude default endpoint sent its model id).
5. **Images: smaller to send, zoom for detail**: attachments are sent at most 1568 px on the
long edge (about 1.15 MP, at most ~1.6k image tokens instead of ~4.8k). When an image was
scaled down, the original is saved next to the sent one; the `zoom_image` tool returns a
region of it at full resolution. It reads only files under the project's chat folder.
## Acceptance
* Claude Code args contain the lean flags when the setting is on, and none of them when off.
* API request: core tools have no `defer_loading`, the others do, and the tool-search tool is
present; non-Claude hosts get the plain full list.
* A Claude Code chat with a picked model/effort passes `--model`/`--effort`; without a pick it
passes neither.
* A 4000×1000 PNG is sent as 1568×392 and its original is kept; `zoom_image` on the sent path
returns a crop of the original; a path outside the chat folder is refused.
## Follow-up: brief, design system, finish (after the binder test)
The binder page (Claude Code, lean) built straight away at 1440x1024 with 44px buttons
everywhere, no components for the 9 repeated slots, and a 350-word report. The 62.8k context
was a 20.3k prefix (lean, as measured) plus the agent's own 19.3k tokens of HTML and the tool
results; each part was written to the cache once. Lean mode also dropped the user's
`"model": "opus"` from `~/.claude/settings.json`, so the turn ran on Sonnet 5.5.
6. **`ask_user` tool + question card**: one to five questions, two to five options, palette
options with swatches; the chat draws clickable chips, "Send answers" and "Use your
defaults". The tool only checks the shape and tells the agent to end its turn.
7. **Chat rules**: a brief before the first design (frame size, density, palette, type, scope,
references), variables and components first, sizes from the agreed density, a five-bullet
report and next steps through `ask_user`.
8. **Lint**: `touch-target` asks 24px (WCAG 2.2 AA) inside screens 1024px or wider, 44px on
narrower screens and standalone components; the autofix follows.
9. **Lean keeps the user's model**: with no pick, the chat passes the `model` from the user's
Claude Code settings.
## Follow-up: long chats (the Jira chat at 230k)
The Jira chat reached 230k of context; every step re-read it. Claude Code's `total_cost_usd`
adds up over a resumed session, so turns showed the running total ($6.72 for a $0.47 turn).
10. **Meter**: a 1M window (current Claude models), counts as `1.6M`; amber past 150k.
11. **Per-turn cost**: `Message::session_cost` keeps the CLI's running total; a resumed turn shows
the difference (older saved turns are derived at display time).
12. **Fresh session past 150k (now 120k)** (CLI backends): not resumed; the new session starts with a recap
(the last 8 requests, the last report) and reads the canvas with tools.
13. **Compact now**: clicking the meter queues the same fresh start for the next message.
14. **API context editing**: `clear_tool_uses_20250919` past 60k input, keep 4, clear ≥15k, tool
inputs too (beta `context-management-2025-06-27`).
15. **Research sub-agent**: with Web on, Claude Code gets a `researcher` agent on Haiku
(`--agents`); it searches and fetches, the main context gets the kept paths only. A research
turn on a fresh chat: $0.26 in all, main context 25.8k (the late in-session one cost $1.71).
Sub-agent text stays out of the chat; its tool calls (and galleries) show.
16. **Turn budget** (Settings → Chat, default 10M tokens read): a turn past it is stopped like
Stop, with a note.
Binary file not shown.

After

Width:  |  Height:  |  Size: 261 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 266 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 584 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

+113
View File
@@ -0,0 +1,113 @@
# Chat layout: design by conversation
## Why
Today an agent drives PaperCraft from outside: a terminal running Claude Code or Codex, pointed at the MCP server. The app shows a working pill, the agent runs and their review, but the conversation itself lives elsewhere. OpenDesign and Cursor's agent view put the conversation next to the result. PaperCraft already has everything behind that: 61 tools, agent runs with auto-versions and review, skills, design systems and libraries.
## Decisions (user, 2026-10-21)
* Backend: **both** local agent CLIs (Claude Code, Codex) and a bring-your-own-key Anthropic API path.
* Layout: a separate **Chat layout**, chat column left, live canvas right, switched from the top bar (`Design | Chat`).
* Conversations live **in the project** (`chats/`), linked to the agent runs they produce.
* Mock-ups first.
## What exists today
* MCP server on `127.0.0.1:<PAPERCRAFT_MCP_PORT>` (default 29980), loopback only, rejects `Origin` headers (`src/mcp/server.rs`). Every tool runs on the UI thread through `App::run_mcp_calls` and `mcp::exec::call`.
* Agent runs (`src/runs.rs`): editing calls grouped into runs with auto-versions, review, revert, the finish toast.
* Tool list and schemas: `mcp::server::tool_list()`, `crate::mcp::tools::edits_doc`.
* Skills: `skills/papercraft`, `skills/papercraft-design`, `skills/papercraft-design-system` (in repo) and the installed copies under `~/.agents/skills/`.
* No HTTP client for outbound API calls except `reqwest` (already in `Cargo.lock` through rmcp) and `curl` used by the CLI's icon download.
## Layout
* **Mode switch** in the top bar: `Design | Chat` (segmented control), shortcut ⌘J. The mode is per window and remembered per project.
* **Chat mode**: left column 420–640 px wide (resizable, default 480), canvas on the right with the normal top bar, zoom and a slim tool strip; the layers, inspector and side views are hidden (a toggle brings the inspector back as a narrow overlay).
* **Chat column**, top to bottom:
* header: chat title (rename), chat list menu (new chat, switch, delete with confirm), agent picker chip (`Claude Code · Opus 5.5`, `Codex · gpt-6.1-sol`, `API · Opus 5.5`) and a settings icon;
* message list: user messages; assistant text streamed as it arrives (markdown: paragraphs, lists, code, inline code, links); thinking/progress shown as a collapsed one-line "Thinking…" row when the backend provides it; **tool-call cards**: verb + target ("Drawing layout · Card", from `agent_verb`), status (running spinner, done, failed with the error), collapsible args/result JSON, a thumbnail for `get_screenshot` results; a **run card** when an agent run ends (`Agent finished, N changes` with Review, Revert, Accept, reusing the run review); errors as a red row with Retry;
* composer: multi-line input (⏎ sends, ⇧⏎ newline), attachment chips (current selection as `@Frame name` chips added by a button or ⌘L, images by paste/drag, the active page), a Stop button while a turn runs, a model/effort menu for the API backend;
* empty state: suggestions built from the project ("Design a sign-in screen using this project's variables", "Lint this page and fix warnings", "Make a dark mode").
* **Patterns from shadcn AI Elements** (ui.shadcn.com/docs/ai-elements; React components, so only their patterns and names are reused, built from `src/ui/kit.rs`):
* **Chat** thread with a message scroller that sticks to the bottom while streaming and keeps your place when you scroll up (a "Jump to latest" pill appears).
* **Message**: user and assistant turns; assistant actions on hover (copy, retry).
* **Reasoning**: collapsible, streams while open, collapses to "Thought for 12s" when done.
* **Tool**: one card per call, states pending / running / done / error, input and output sections collapsible; a screenshot output shows inline.
* **Task / Chain of Thought**: consecutive tool calls in one assistant turn group into a step list ("Built the card · 5 steps") that expands.
* **Plan / Queue**: when the agent keeps a todo list (Claude Code `TodoWrite`, or the API backend's plan), show remaining and completed items pinned above the composer.
* **Confirmation**: approve or deny before destructive tools run (`delete_pages`, `delete_nodes` on more than 20 layers, `disable_library`, `import_design_system`); API backend pauses the loop; CLI backends rely on the CLI's own permission prompt where it exists, else the tool stays allowed and the run can be reverted.
* **Checkpoint**: each agent run's auto-version shows as a checkpoint in the thread; "Restore to here" reverts the runs after it (reuses `runs::revert`).
* **Context**: a small meter in the header with tokens used of the model's context window (API and Claude Code report usage).
* **Model Selector**: backend + model menu and an effort menu.
* **Prompt Input**: multi-line field, attachments (selection, images, page), send / stop.
* **Suggestion**: one-click prompts in the empty state and after a run ("Lint this", "Make a dark mode", "Review changes").
* **Subagent**: a nested, collapsible block when a CLI agent spawns a sub-agent.
* **Code Block**: fenced code in replies with a copy button.
* Not used: Sources, Inline Citation, File Tree, Terminal, Stack Trace, Test Results (not design work).
* **Canvas side**: follows the agent: when a tool call targets a node, the canvas pans to it unless the user moved the camera in the last 10 s; the run overlay (green/yellow/red outlines) shows while a run is open.
* Design mode keeps working as today; the chat keeps running in the background when you switch.
## Backends
All backends drive the same tools, so runs, undo, review and revert work the same.
### Local agent CLIs
* **Claude Code**: spawn `claude -p` with streaming JSON in and out (`--input-format stream-json --output-format stream-json --verbose`), an MCP config pointing at the app's server (`--mcp-config` with `{"mcpServers":{"papercraft":{"type":"http","url":"http://127.0.0.1:<port>/mcp"}}}`), the papercraft tools allowed (`--allowedTools "mcp__papercraft__*"`), working directory = the project folder, and the system prompt appended with the PaperCraft skill text. Resume with `--resume <session_id>` (stored on the chat). Exact flags are checked against `claude --help` at implementation time and wrapped in one adapter.
* **Codex**: spawn `codex exec --json` with the server added through `-c mcp_servers.papercraft.url=...` (or the current equivalent, checked against `codex exec --help`), resume with its session id. Same adapter shape.
* **Detection**: Settings → Chat lists the CLIs found on `PATH` (plus a path override) with their version; a missing CLI shows install hints, never an error dialog.
* **Events**: each adapter turns the CLI's JSON lines into one internal event stream: `Text(delta)`, `Thinking(delta)`, `ToolStart{id,name,args}`, `ToolEnd{id,result|error}`, `TurnEnd{usage?}`, `Error`. Tool calls also arrive through the MCP server, so the card status is confirmed by the app itself (`log_agent`), not only by the CLI's report.
* **Stop**: sends an interrupt (stdin control message where supported, else SIGINT, then kill after 3 s). The run so far stays reviewable.
* **Security**: the CLI runs with the user's own permissions and logins; PaperCraft passes no keys. Only papercraft tools are pre-allowed; other tools follow the CLI's own permission settings (non-interactive: denied).
### Anthropic API (bring your own key)
* Raw HTTPS to `POST https://api.anthropic.com/v1/messages` with `stream: true` (no Rust SDK exists), using `reqwest` (already a dependency).
* **Key**: entered in Settings → Chat, stored in the macOS Keychain (Linux: Secret Service; Windows: Credential Manager) through the `keyring` crate, never in project files or logs. `ANTHROPIC_API_KEY` in the environment is used when no key is stored.
* **Model**: default `claude-opus-5-5`; menu also offers `claude-sonnet-5-5` and `claude-haiku-5-5`. Thinking adaptive (default on these models), `output_config.effort` set explicitly (default `medium`, menu low/medium/high), `thinking.display: "summarized"` so the Thinking row has text. Server-side refusal fallback on (`fallbacks: "default"` with beta `server-side-fallback-2026-07-01`; for Haiku, show the refusal instead).
* **Tools**: the app's own tool list (`tool_list()` converted to Messages API `tools`: name, description, input_schema), with `eager_input_streaming: true`; inputs are parsed tolerantly, validated against the schema before running, and run through `mcp::exec::call` on the UI thread like any MCP call (so runs and undo behave the same). Several `tool_use` blocks in one turn run in order and all `tool_result` blocks go back in one user message; failures go back as `is_error: true`. No forced `tool_choice` (not supported on these models).
* **Loop**: stream → collect `tool_use` → run → append `response.content` unchanged (thinking blocks included) + tool results → next request, until `stop_reason` is `end_turn`; `max_tokens` → continue once with a note; `refusal` → show the category; `pause_turn` → continue. Max 40 tool rounds per user message (then stop and say so).
* **Caching**: `cache_control` breakpoints on the tool list and on the system prompt (skill text + project context), stable ordering so they hit; per-turn volatile context (selection, active page) goes in the user message, not the system prompt. `usage.cache_read_input_tokens` is logged to verify.
* **Images**: `get_screenshot` results go back as image blocks so the model sees what it made; user-attached images too.
* **Cost line**: per turn input/output/cache tokens and an estimated cost from a small price table, shown under the turn in a muted row.
* Implementers read the bundled claude-api skill files `curl/examples.md`, `shared/tool-use-concepts.md`, `shared/prompt-caching.md`, `shared/model-migration.md` (Opus 5.5 section) before writing this adapter.
### Custom endpoints (generic, no provider list)
The API backend is not tied to Anthropic. Settings → Chat holds one or more **endpoints**, each `{ name, format, base_url, model, key }`:
* `format`: `anthropic` (Messages API, `POST {base}/v1/messages`, `x-api-key`) or `openai` (Chat Completions, `POST {base}/chat/completions`, `Authorization: Bearer`, streaming SSE `choices[].delta`, tools as `{"type":"function","function":{name,description,parameters}}`, `tool_calls` with `arguments` streamed as string fragments, results as `role: "tool"` messages).
* `base_url`: free text (e.g. `https://api.anthropic.com`, any Anthropic-compatible URL, `http://127.0.0.1:11434/v1`). `model`: free text. `key`: optional (local servers need none), stored in the OS keychain under the endpoint's base URL, never in settings files.
* Claude-only request fields (`output_config.effort`, `thinking.display`, `fallbacks` and its beta header, `eager_input_streaming`) are sent only when the base URL host is `api.anthropic.com`; other Anthropic-format endpoints get a plain request (adaptive thinking omitted), and are tolerant of missing `usage`, `thinking` blocks, or `cache_*` fields.
* The cost line shows a price only for models in the built-in Claude price table; otherwise tokens only (or nothing when the server reports no usage).
* No provider names, presets or logos in the app. A default endpoint `Anthropic` (`anthropic`, `https://api.anthropic.com`, `claude-opus-5-5`) exists so the first-run path stays one key away.
* The agent picker lists every configured endpoint by its name.
### Not in scope (v1)
* Named provider presets.
* Multiple chats running at once in one project (one active turn per project).
* Voice, file uploads other than images.
## Storage
* `chats/<id>.json` in the project folder: `{ id, title, created, updated, backend: {kind, model?, effort?, cli_session?}, messages: [ {role, text, tools:[{id,name,args,result,error,ms}], run_id?, usage?, at} ] }`. API backend also keeps the raw `messages` array (for exact replay, including thinking blocks) in `chats/<id>.api.json`.
* Chats sync with the project (relay). Deleting a chat deletes both files after a confirm.
* The project's newest chat opens when entering Chat mode.
## MCP and CLI
* No new tools needed. `papercraft-cli` is unchanged.
## Acceptance
* Chat mode toggles from the top bar and ⌘J; layout matches the mock-ups at 1440p and 1280x800.
* With Claude Code installed: "Create a 390x844 artboard named Test with a centred title" streams text, shows tool cards for `create_artboard` and `write_html`, the canvas follows, a run card appears at the end, Review/Revert work; a follow-up message continues the same CLI session.
* Same with Codex.
* With an API key: the same prompt works through the API backend; thinking row shows a summary; cost line shows tokens; a second turn reads from cache (`cache_read_input_tokens > 0`).
* Stop during a long turn ends it within 3 s; tools already applied stay and are revertible.
* Missing CLI and missing key show setup states, not errors; a bad key shows the API error message.
* Chats persist in `chats/` and reopen after restart; a project without `chats/` loads unchanged.
* The key never appears in project files, logs or crash output (test greps the project folder and the log after a run).
* Tests: event parsing for each adapter from recorded JSON fixtures (Claude Code stream-json, Codex --json, Anthropic SSE incl. thinking, tool_use with input_json_delta, refusal, max_tokens); tool-schema conversion; chat file round trip; the API loop with a fake HTTP server (two tool rounds then end_turn).
* `cargo test --no-fail-fast`, wasm and Windows checks pass (chat backends are native-only; the web build shows Chat mode disabled with a note).
+33
View File
@@ -0,0 +1,33 @@
# Tasks
Stop on failure. Tasks in one wave touch different files and run in parallel; a wave starts when the previous one passes `cargo test --lib`. A read-only review after waves 2 and 4; real findings are fixed before moving on.
## Wave 0: design (parallel with wave 1)
- [x] 0. **Mock-ups** in the `PaperCraft` design file, new page `Chat`: `Chat / Empty`, `Chat / Streaming` (text + tool cards + thinking row), `Chat / Run finished` (run card, canvas overlay), `Chat / Agent picker` (menu open, CLIs found/missing, API), `Chat / Setup` (no CLI, no key), `Settings / Chat`, at 2560x1440 and a 1280x800 variant of `Chat / Streaming`. The user's app had another project open, so this ran through the 0.5.0 offline CLI on the `PaperCraft` project (each call refuses if the app has it open); never `open_file` in the user's app.
## Wave 1: model and storage (parallel)
- [x] 1. **Chat model and storage** (new `src/chat/mod.rs`, `src/chat/store.rs`): types from the spec, `chats/` load/save/list/delete, legacy project without `chats/`. Tests: round trip, listing order, delete.
- [x] 2. **Event stream and adapters' parsing** (new `src/chat/events.rs`, `src/chat/claude_code.rs`, `src/chat/codex.rs`, `src/chat/anthropic.rs` parsing half): the internal `Event` enum and pure parsers from recorded fixtures (`tests/fixtures/chat/`). Record real fixtures by running the CLIs once on a scratch project with a throwaway prompt (no user data); for the API, build SSE fixtures from the documented event shapes. Tests per backend.
## Wave 2: backends (after wave 1; 3, 4, 5 parallel)
- [x] 3. **Claude Code process** (`src/chat/claude_code.rs`): detect, spawn with MCP config and allowed tools, stream stdin/stdout on a worker thread, resume, stop. Integration test gated on `claude` being on PATH (skipped otherwise).
- [x] 4. **Codex process** (`src/chat/codex.rs`): same for `codex exec --json`. Gated test.
- [x] 5. **Anthropic API loop** (`src/chat/anthropic.rs`, `keyring` dependency): key storage, request building (tools from `tool_list()`, caching, effort, thinking display, fallbacks), SSE streaming, tool loop through a channel to the UI thread (`mcp::exec::call`), usage and cost. Test with a fake HTTP server.
## Wave 3: UI (after wave 2 and the mock-ups; 6 then 7 and 8 parallel)
- [x] 6. **Chat layout and mode switch** (`src/ui/chat.rs`, `src/ui/mod.rs`): Design | Chat toggle, ⌘J, column + canvas layout, resizable column, remembered per project.
- [x] 7. **Messages and composer** (`src/ui/chat.rs`): markdown text, thinking row, tool cards, run card (reuse run review actions), errors with Retry, composer with attachments, Stop, empty state suggestions, agent picker, chat list. Canvas follows tool targets.
- [x] 8. **Settings → Chat** (`src/ui/settings.rs`): CLI detection and paths, API key (Keychain), default backend/model/effort.
## Wave 4: finish
- [x] 9. **End-to-end check** with each available backend on a scratch copy of a project (own app instance on its own port and `PAPERCRAFT_HOME`), screenshots against the mock-ups, key-leak grep.
- [x] 10. **Docs and release notes**: `docs/chat.md`, README section and screenshot, `docs/agents.md`, ROADMAP row 44 done, PROGRESS entry; full test suite, wasm and Windows checks.
## Model per task
Claude Sonnet: 0, 2, 3, 5, 6, 7, 9. Claude Haiku: 1, 8, 10. Codex `gpt-6.1-sol`: 4 and the reviews (Claude Sonnet if Codex is unavailable).
+30
View File
@@ -0,0 +1,30 @@
# Design from the CLI without the app
## Why
`papercraft-cli call` needs the app running with a project open. Agents on a server, in CI, or on a machine where the app is closed cannot design at all. The code that runs every tool already works without a window: `SessionHost` (`src/mcp/exec.rs:52`) holds an `Editor` and a `Session` and has an offscreen renderer (`Headless`) for screenshots and PNG export. Tests drive it today.
## Scope
1. **Offline calls.** `papercraft-cli call <tool> [JSON]` runs in-process on a `SessionHost` when the app is not reachable, or always with `--offline`. Projects come from the same store (`$PAPERCRAFT_HOME`, else the default folder). `--project <name|id|path>` opens a project first; without it, the most recently modified project is used, and `create_file` / `open_file` work as usual. Every editing call saves before exit.
2. **Safety.** When the app is reachable, plain `call` keeps going through the app (it is the one with the open file). `--offline` while the app has the same project open is refused ("PaperCraft has this project open; close it or drop --offline"), so two writers never race on one folder.
3. **Shell.** `papercraft-cli shell [--project X] [--offline]` is an interactive session that keeps one host for many calls:
* a line is `<tool> <json>` (JSON may span lines until braces balance), or a command: `:help`, `:tools`, `:schema <tool>`, `:open <project>`, `:pages`, `:page <name|id>`, `:shot [nodeId] [file]`, `:undo`, `:redo`, `:save`, `:quit`;
* `:watch on|off`: after every editing call, re-render the artboard last touched (or the page) to `preview.png` in the current folder; on iTerm2, WezTerm and kitty the image is also shown inline in the terminal;
* history in `~/.papercraft_cli_history` when a line editor is available; plain stdin otherwise (works in pipes, so `papercraft-cli shell < script.pc` runs a script).
4. **Preview without a GPU.** If no adapter is found, retry with the fallback (software) adapter; if that fails too, image tools return a clear error and every other tool still works.
5. **Docs.** `docs/agents.md`: offline use, the shell, scripts. `papercraft-cli --help` updated.
## Not in scope
* A headless MCP server (`papercraft-mcp --offline`); the same host makes it a small follow-up.
* A TUI canvas.
## Acceptance
* With the app closed: `papercraft-cli call create_file '{"name":"Demo"}'`, then `call create_artboard`, `call write_html`, `call get_screenshot -o out.png` produce a saved project and a PNG; opening the project in the app shows the design.
* With the app open on project X: `call` goes to the app; `call --offline --project X` is refused; `--offline --project Y` works.
* `papercraft-cli shell < script` runs a multi-line script and exits 0; a failing tool line exits 1 at the end and prints which line failed.
* `:watch on` writes `preview.png` after each editing call.
* Tests: offline call round trip on a temp store, refusal when a fake "app has it open" check says so, shell script parsing (multi-line JSON, commands).
* `cargo test --no-fail-fast`, wasm `cargo check --lib` and Windows check pass (the CLI binary is native only).
Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

+104
View File
@@ -0,0 +1,104 @@
# Variable collections, shared libraries and assets
## Why
Variables are a flat list of colors plus untyped tokens, copied into every page's `Document` and kept in step by hand (two writers fan out to every page, the remove buttons in `src/ui/confirm.rs` do not). There are no groups, no types beyond color, no aliases, and only fills can bind. Components work only on the page that holds the main: the Design tab lists the active page's components, so a `Design System` page's components are invisible everywhere else, and `create_instance` / `swap_instance` refuse other pages. Nothing can be shared between files except a one-off package import.
Goal: Figma's model, local-first. Collections with modes, slash groups, typed variables with aliases; components usable from any page; any file can publish itself as a library that other files enable and update; a proper place to see and edit all of it.
## Decisions (user, 2026-10-21)
* Libraries: **Figma-style publish**. A file publishes a versioned snapshot; consumers keep a copy and get "Updates available". Files keep working when a library is missing.
* Variables: **collections + groups + types + aliases**, number variables bindable to geometry and type.
* UI: a **Variables modal**, a **Libraries modal**, and an **Assets** side view. Design mock-ups first.
## What exists today (checked 2026-10-21)
* Storage: `Document.variables` (active colors), `modes`, `mode`, `tokens` (`src/model/document.rs:15`), one copy per page. Writers: `Tx::set_variable`, `remove_variable`, `rename_variable`, `set_token`, `remove_token`, `set_design_system`, `remove_mode`, `set_variable_in_mode`, `set_mode` (`src/history.rs`); UI `on_every_page` (`src/ui/design.rs:15`); MCP `set_variables`, `set_tokens`, `set_variable_mode`, `import_design_system`, `create_page` (`src/mcp/exec.rs`).
* Binding: `Paint::Solid { color, var: Option<String> }` holds the CSS name; the color is baked in and `apply_variable` rewrites it. Renderer, SVG and PDF read the baked color only. Tokens are substituted as text when CSS is written (`css::set_variables_in_scope`), no link kept.
* Readers: codegen (`:root`, `[data-mode]`, Tailwind, DTCG), `get_variables`, `tokens_css`, lint (`lint.rs` match and auto-link), `diff_pages`, inspector var picker.
* Components: `Node.component`, `InstanceLink { main: NodeId, overrides }`; `Editor::fixup` syncs instances on the same `Document`. `import_components` copies mains between pages with no link back.
* Project: `project.json` (version 2: v1 to v2 is a no-op manifest step; the version bump makes older apps refuse), `pages/<id>.json` (version 3, migration chain), `versions/`, `runs/`. Projects live in one store folder; relay library mode already syncs every project to every device.
* Figma import ignores variables and does not link instances.
## Model
### Variables (project level, `design.json` in the project folder)
```text
DesignSystem
collections: [Collection]
Collection { id, name, modes: [Mode { id, name }], default_mode, variables: [Variable] }
Variable { id, name: "color/brand/primary", kind: Color | Number | String | Boolean,
values: { mode_id: Literal | Alias(variable id) }, description, hidden: bool }
```
* **Groups** are the `/` segments of the name (`color/brand/primary` sits in group `color/brand`). Renaming a group renames every variable under it.
* **CSS name**: segments joined by `-`, sanitized (`--color-brand-primary`). Two variables with the same CSS name across all enabled collections are refused at write time.
* **Aliases** point to a variable of the same kind in any collection, including a library's. Cycles are refused. A value resolves through aliases per mode.
* **Active mode** is per page per collection (`PageFile.modes: {collection_id: mode_id}`, default = `default_mode`). A new page inherits the active page's choice.
* **Numbers** carry no unit; they bind as px. **Strings** substitute as text (font family, shadow). **Booleans** bind to visibility.
* **One source, one cache.** `design.json` is the only stored truth. Each page's `Document.variables` / `modes` / `mode` / `tokens` become a derived cache rebuilt from it (resolved with that page's modes, keyed by CSS name), so the renderer, codegen, lint, diff and export keep reading what they read today. Every writer goes through one design-system API that updates `design.json`, rebuilds every page's cache and re-applies bindings in one undo step per page.
* **Migration** (project version 1 → 2): the first page's `variables` + `modes` become collection `Colors` (one mode per existing mode, else `Default`); `tokens` become collection `Tokens` (a px value such as `16px` becomes Number; anything else, including unitless `1.5`, stays String). Existing fill bindings keep working because CSS names do not change. Pages keep their fields as the cache. The manifest version is 2, so an older app refuses the project ("made by a newer PaperCraft") rather than write pages without bindings and never update `design.json`.
### Bindings
* Fills keep `Paint::Solid.var` (CSS name).
* New `Node.bindings: BTreeMap<field, css name>` for `stroke` (color), `text-color`, `width`, `height`, `gap`, `padding` (all four or per side), `radius`, `font-size`, `line-height`, `opacity`, `visible` (boolean). A bound field is re-applied when the variable, an alias target or the page's mode changes, exactly like fills today. Detaching writes the resolved value and drops the binding.
* Instances inherit bindings from mains; an overridden field drops it on the instance only.
### Components across pages
* Every main gets a stable `component_key` (created on `create_component`, migrated for existing mains).
* `InstanceLink` gains `source: Option<Source>`: `None` = same page (current behaviour), `Page(page_id)`, `Library(library_id)`. `main` keeps pointing at the node id inside that source document.
* Editing a main on page A re-syncs instances on every other page whose link is `Page(A)`, in the same commit (one undo step per touched page). Deleting a main leaves its instances as they are, marked "main missing" (Assets offers Detach or Restore).
* `create_instance` and `swap_instance` accept a component from any page or enabled library (`componentId` as `pageId:num`, or `componentKey`).
* `import_components` stays (copy) but is no longer needed for reuse.
### Libraries
* **Publish** (Libraries modal, or MCP `publish_library`): writes `library.json` in the file's project folder: `{ library_id (= project id), name, description, version (counter), published (ms), collections (non-hidden variables), components (every main not named with a leading `_` or `.`, with its subtree and a 256px PNG preview) }`. A diff against the previous publish is shown first ("3 variables changed, 1 component added").
* **Available libraries** = every project in the store with a `library.json` (relay library mode makes other devices' libraries appear with no extra work).
* **Enable** in a consumer copies the snapshot to `<consumer>/libraries/<library_id>.json` and records `{library_id, version}` in `design.json`. Library collections show read-only in the Variables modal (aliasable, bindable); library components show in Assets.
* **Updates**: when the library's `version` is newer than the copy, the Libraries modal and a dot on the Assets tab say "Updates available". Review lists changed variables and components; **Update** replaces the snapshot, rebuilds caches and re-syncs `Library(id)` instances (instance overrides kept). Updates are never applied silently.
* **Missing library**: the copy keeps everything working; the modal shows "Source not found" with Disable (bindings are detached to resolved values, instances detached) after a confirm.
* **Disable** with uses left: confirm, then detach as above.
## UI
* **Variables modal** (from Design tab "Open variables", palette "Variables…", ⌘⌥V): left column collections (local, then each library, read-only) with their group tree; main area a table, one row per variable in the selected group, one column per mode; cells edit inline (swatch + hex, number, text, toggle) with an alias picker ("→ color/brand/primary"); add variable (type menu), add mode, add collection, rename and delete (confirm), search, a details pane (description, hidden from publishing, CSS name, where used count). Copy CSS / JSON / Tailwind move here.
* **Libraries modal** (Share menu "Libraries…", palette, Assets header): "This file" (publish state, description, changes since last publish, Publish), "Libraries" (available libraries with Enable toggles, version, source status), "Updates" (per library review and Update).
* **Assets side view** (replaces the Library tab icon slot, keeps My shapes as its last section): search; sections This file (grouped by page), each enabled library, My shapes; previews in a grid; click to place at the viewport centre, drag onto the canvas; context menu: Go to main, Detach all, Rename (local only). Instances whose main is missing show a warning row.
* **Design tab** slims to: modes per collection for this page, a short variables summary with "Open variables", lint. The components list moves to Assets.
* **Inspector**: every bindable field gets the variable picker (filtered by kind), a bound field shows the variable chip with Detach.
Mock-ups: `PaperCraft` design file, new page `Design libraries`, artboards `Modal / Variables`, `Modal / Libraries`, `Modal / Library updates`, `Panel / Assets` (344x1440 like the other panel states), `Inspector / Bound fields` (344x1440). Modals drawn at 2560x1440 window size and checked at 1280x800.
## MCP and CLI
* `get_variables` returns collections, groups, kinds, per-mode values and aliases (current formats keep working; DTCG nests groups).
* `set_variables` gains `collection`, `type`, `mode`, `alias`, `description`, `hidden`; old calls (color by name) still work and land in the first collection.
* New: `create_collection`, `delete_variables`, `bind_variable` (node field ← variable), `publish_library`, `list_libraries`, `enable_library`, `update_library`, `disable_library`.
* `get_components` lists every page and enabled library with `componentKey` and `source`.
* Every new tool is classified in `edits_doc` (the existing test enforces it).
## Not in scope (v1)
* Text styles, effect styles, grid styles (roadmap row 9; next).
* Component variants and properties (row 10).
* Per-frame mode override (mode is per page).
* Live links between files without publish.
* Figma variable import (separate item; the model now has room for it).
## Acceptance
* Migration: a project with variables, modes and tokens opens as version 2 with collections `Colors` and `Tokens`; every existing fill binding still resolves; 0.4.0 refuses a migrated project with a clear "made by a newer PaperCraft" error instead of losing data.
* Groups: renaming group `color/brand` renames its variables and every binding follows.
* Aliases resolve per mode; a cycle is refused; deleting an aliased variable asks first and detaches dependents to resolved values.
* Number bindings: changing `space/md` from 16 to 24 updates the gap of every bound frame on every page in one undo step per page; switching a page's mode updates its bound fields only.
* Removing a variable or mode from the UI affects every page (fixes today's page-only removal).
* An instance on page B of a main on page A updates when the main changes; undo on A and B each restores its side.
* Publish → enable in another project → instance and binding work; change and republish → consumer shows Updates available → Update re-syncs instances and keeps overrides; deleting the library project leaves the consumer working with "Source not found".
* Two libraries defining `--color-bg` cannot both be enabled without a clear error.
* Variables modal, Libraries modal and Assets view match their mock-ups at 1440p and 1280x800 (screenshot check).
* `cargo test --no-fail-fast`, wasm and Windows checks pass; web build loads.
+43
View File
@@ -0,0 +1,43 @@
# Tasks
Each task is independently testable. Stop on failure. Tasks in the same wave touch different files and can run in parallel; a wave starts when the previous one passes `cargo test --lib`. After each code wave a read-only Codex `gpt-6.1-sol` review; real findings get fixed before the next wave.
## Wave 0: design (parallel with wave 1)
- [x] 0. **Mock-ups** in the `PaperCraft` design file, new page `Design libraries`: `Modal / Variables`, `Modal / Libraries`, `Modal / Library updates`, `Panel / Assets` (344x1440), `Inspector / Bound fields` (344x1440). Reuse the `Design System` page variables and components. Only through the user's running app after `get_basic_info` confirms the open file is `PaperCraft`; never `open_file` in the user's app.
## Wave 1: model (parallel)
- [x] 1. **Design-system model** (new `src/variables.rs`). Types from the spec (`DesignSystem`, `Collection`, `Mode`, `Variable`, `Kind`, `Value`), ids, CSS name, group helpers (list groups, rename group), alias resolution per mode with cycle check, duplicate CSS name check, `cache_for(page modes) -> (variables, modes, mode, tokens)` producing today's `Document` fields. Tests: groups, rename group, alias chain, cycle refused, duplicate refused, cache matches today's shape.
- [x] 2. **Storage and migration** (`src/project/format.rs`, `src/project/mod.rs`, `src/session.rs`). `design.json` load/save next to `project.json`; project version 2 with a `PROJECT_STEPS` step building collections `Colors` and `Tokens` from the first page; `PageFile.modes` per collection; `component_key` for existing mains. Tests: v1 project migrates, round trip, a v2 project's page files still deserialize in the old reader shape.
- [x] 3. **Bindings field** (`src/model/node.rs`, `src/model/paint.rs`). `Node.bindings`, `InstanceLink.source`, `Node.component_key`, all `serde(default)`. Tests: old pages load; serialization skips empty fields.
## Wave 2: wiring (after 1–3; 4 then 5 and 6 in parallel)
- [x] 4. **One write path** (`src/history.rs`, `src/editor/*`). Design-system edits update the project `DesignSystem`, rebuild every page's cache and re-apply fill and field bindings, one undo step per page; replace `on_every_page` and the page-only removals in `src/ui/confirm.rs`. Per-page mode switch. Tests: number binding change on two pages; mode switch only touches its page; undo per page.
- [x] 5. **Field bindings applied** (`src/editor/structure.rs`, layout). Apply bound stroke, text colour, size, gap, padding, radius, font size, line height, opacity, visible; instance sync carries bindings; detach writes resolved values. Tests per field.
- [x] 6. **MCP and exports** (`src/mcp/exec.rs`, `src/mcp/tools.rs`, `src/mcp/codegen.rs`, `src/design_system.rs`). Extended `get_variables` / `set_variables`, `create_collection`, `delete_variables`, `bind_variable`; DTCG nests groups; old calls still work. Tests: old and new call shapes, DTCG groups, `edits_doc` classification.
## Wave 3: components across pages (after wave 2)
- [x] 7. **Cross-page instances** (`src/editor/structure.rs`, `src/mcp/exec.rs`). `Source::Page` sync on main edit, create/swap from any page, "main missing" state. Tests: edit main on A updates B; undo per page; delete main leaves instance flagged.
## Wave 4: libraries (after wave 3; 8 then 9)
- [x] 8. **Publish and enable** (new `src/libraries.rs`). `library.json` writer with previews and publish diff, available list from the store, enable copies snapshot, library collections and components resolvable (`Source::Library`), duplicate CSS name refusal. Tests: publish, enable in second project, binding and instance work, conflict refused.
- [x] 9. **Updates and missing sources** (`src/libraries.rs`). Version compare, review diff, update keeps overrides, missing library keeps working, disable detaches after confirm. MCP `publish_library`, `list_libraries`, `enable_library`, `update_library`, `disable_library`. Tests per path.
## Wave 5: UI (after wave 4 and the mock-ups; 10, 11, 12 in parallel, then 13)
- [x] 10. **Variables modal** (new `src/ui/variables.rs`). Screenshot check against `Modal / Variables`.
- [x] 11. **Libraries modal** (new `src/ui/libraries.rs`). Screenshot check against `Modal / Libraries` and `Modal / Library updates`.
- [x] 12. **Assets view** (`src/ui/library.rs` becomes Assets). Screenshot check against `Panel / Assets`.
- [x] 13. **Design tab and inspector** (`src/ui/design.rs`, `src/ui/inspector.rs`, palette entries). Slim Design tab; variable picker on every bindable field. Screenshot check against `Inspector / Bound fields`.
## Wave 6: finish
- [x] 14. **Docs and verify**. `docs/design-system.md`, `docs/agents.md` (new tools, count), `ROADMAP.md` rows 7, 8, 12, `PROGRESS.md`; skills `skills/papercraft*` mention collections, bindings and libraries. Full `cargo test --no-fail-fast`, wasm and Windows checks, web build loads.
## Model per task
Claude Sonnet: 0, 1, 2, 4, 5, 7, 8, 10, 11, 12. Claude Haiku: 3. Codex `gpt-6.1-sol`: 9, 13, and the reviews (task 6 moved to Sonnet: Codex hit its usage limit on 2026-10-21). Codex `gpt-6-luna`: 14.
+44
View File
@@ -0,0 +1,44 @@
# Package A report: Interview Design System
Date 2026-10-23. Project `Interview` (fileName verified). Backup: `/Volumes/Storage/Projects/Interview.backup-20261023-0112`. Screenshots in `A/` (before-*, after-*). Mapping files: `variable-mapping.csv`, `component-mapping.csv` (old name, new name, componentKey, action; 280 rows).
## 1. Variables (collection `Colors`)
- 161 -> 137 variables (25 merged, +1 `color/brand/primary-strong`). All names are `color/<group>/<name>` (csv `new` column with `color/` prefix). SYS-03: named by role, not value.
- Rename = create new + repoint every bound fill (`update_styles`) + delete old. The app has no rename tool, and `delete_variables` detaches fills, so repointing was required. 4293+ bound fills repointed on all 3 pages. No dangling `var(--old)` found afterwards.
- Merges (csv "merge" rows) repointed to the canonical variable then deleted (no leftover aliases needed because nothing binds them).
- SYS-02 (semantic alias over primitive value): `color/brand/pressed` and `color/text/link` are aliases of `color/brand/primary-strong` (#0958d9); `color/status/info` is an alias of `color/brand/primary`.
- Contrast: `#1677ff` + white = 4.10:1 FAIL, `#0958d9` + white = 6.16:1 pass (`playbook contrast`), `#0958d9` on `#e6f4ff` 5.50:1 pass (SYS-05). 40 DS fills (Button / Primary x3, Avatar x5, sidebar active items, dots, brand marks, OK button) rebound to `primary-strong`; 16 literal `#1677ff` text nodes now use `text/link` colour. DS contrast errors 128 -> 67 on the original components.
- Final groups (Colors): avatar 5, bg 6, border 4, brand 6 (primary, primary-strong, pressed, hover, secondary, focus-ring), button 1, camera 2, code 2, control 1, diff 2, hero 2, ide 31, status 9, sidebar 8, syntax 7, syscheck 6, tag 18 (tag/<hue>/{bg,border,text}), text 6, whiteboard 9, auth 12.
- Colours the page still uses as hard-coded literals (text colours, borders) are not bound; that is B/C work (tools bind fills only).
## 2. Tokens
- Old `Tokens` collection (32: 26 number, 3 shadow strings, 4 z-index strings) deleted; shadows and z-index dropped (unsupported in PaperCraft, unreferenced). Empty `Tokens` collection remains (no delete-collection tool; remove in the Variables modal).
- New collection `Spacing & Size` (34 Number variables): `space/{4,8,12,16,24,32,48,64}` (12 added), `radius/{sm4,md8,lg12,xl16,pill999}`, `font/size/{xs12,sm14,md16,lg20,xl24,2xl32,3xl40,4xl48}` (18 dropped), `font/leading/{xs16..2xl40}`, `layout/page-padding(-lg)`, `layout/page-width/{xs480,sm420,md720,lg900,xl1100}` (3 duplicate widths removed). SYS-01/SYS-02.
- Nothing is bound to them yet (tokens are substituted when written). Use `bind_variable` in later work.
## 3. Components (Design System page: 211 -> 260 mains)
- Consolidated: Ant Button Primary/Default/Danger (9), Ant Tag (5), Ant Segmented (3), Ant Table (2) dropped after `swap_instance` of their DS cells to the kept set (19 swaps, 19 mains and 19 cells deleted). Ant Text / Text Danger kept as `Button / Text` and `Button / Danger Text` (SM/MD/LG). AntD showcase groups removed, cells moved into `Group / Buttons`.
- 78 mains renamed to `Group / Variant [/ SM|LG]` (see csv). Button MD height 34 -> 32 (SM 28, LG 40). `Page Header` kept as `Header / Page` (no action slot; not equal to `Header / Admin`, so not merged).
- Fixed: `Header / Candidate` height 0 -> 134 (Header Card height 100% -> fit-content). 8 `Alert / *` 456/478/522 -> 38 high (message text width 0px -> fit-content).
- Moved 68 page-local components onto the DS page (17 Admin, 51 Candidate): each moved with `move_nodes toPageId`, instances on the source page re-pointed with `swap_instance` by componentKey, instance layer names updated. Packed at x=1560, y 8623..13765 on the DS page. `Candidate Message / Success` renamed `Banner / Success` (name clash with the Admin one, different design).
- Skipped (not moved): `T Hdr`, `T Donut`, `T Spark`, `T Stat` (Admin template stubs, 0 uses; equivalents exist in DS: Section Title, Donut, Sparkline, Stat). Delete them in package B.
- Not done: collapse of combinatorial variants (Segmented Active N, Tabs Bar N, 11 sidebars, content-baked Challenge Option/Timeline, colour-named Stat/Sparkline), missing states (hover/disabled etc.), Input/Select/Textarea LG state matrix (SYS-06/07 follow-ups), `Light` mode rename of `Default` (no tool).
- Side effect: while moving, Admin's own copies of `Button / Primary Small`, `Button / Primary Large`, `Button / Default` were moved by mistake (the copy filter used renamed names) and then deleted from DS; no Admin instance pointed at them (nested ones live inside other instances). B should re-import or swap to the DS mains below.
- Admin/Candidate still carry their old copies of the other 211 DS components under old names; B/C: use `component-mapping.csv` and `swap_instance componentKey`.
### Kept component keys (packages B and C)
`componentKey` for every kept or moved main is in `component-mapping.csv` (column 3). Frequently needed:
Button / Primary `64e1d4aaf56fe6a4:5980`, Primary / SM `:5982`, Primary / LG `:5984`, Secondary `:5986`, Secondary / SM `:5988`, Secondary / LG `:5990`, Ghost `:5992`, Danger `:5998`, Dark `:6004`, Icon / Bell `:6010`.
Header / Admin `64e1d4aaf56fe6a4:6480`, Header / Page `:6476`, Header / Candidate `:6489`, Header / Admin / With Action `1c5e5918`.
Form Field / Default `:6663`, Card / Default `:6054`, Alert / Error `:6728`, Input / Default `:6575`, Sidebar / Admin `:6906`, Sidebar / Candidate `:7370`.
(Key prefix is the DS page id `64e1d4aaf56fe6a4`.) Moved components have short keys (e.g. `bd7f34e5`), see csv.
## 4. Annotations
Template `Dev handoff` set on the DS page. 11 notes (dev, a11y, behaviour): one Primary per screen and contrast pair, tag colour by status, Data Table single set, Segmented, Input states, Alert, Tab hit area, Form Field, Header variants, Pill.
## 5. Lint (DS page, byRule)
Before: contrast 128, hard-coded 11, layer-name 7, spacing 57, touch 16, type-scale 42 (list truncated at 200; counts exact).
After (whole page): contrast 194, hard-coded 366, layer-name 49, spacing 180, touch 30, type 135. The rise is the 68 moved local components (contrast 127, hard-coded 225, layer-name 42, spacing 123, touch 9, type 93). The original components: contrast 67 (-61), hard-coded 146 (more literals now match a single variable after merges, so lint flags them), layer-name 7, spacing 57, touch 21 (Button MD 32 < 44, desktop density accepted, documented in annotation), type-scale 42. Remaining contrast: `#52c41a`/white 2.3, `#8c8c8c` 3.4 (placeholders), `#bfbfbf` 1.8 (disabled), tag text pairs, IDE greys: design decisions left for follow-up. `lint-ds-before.json` saved in `A/`.
## Leftovers for the user
Empty `Tokens` collection; mode `Default` not renamed; 15 `Label / *` stubs at x=30000 not deleted; Colors board has no swatch for `brand/primary-strong`; `brand/hover` (#4096ff) with white text fails contrast (hover state unused in DS).
Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 464 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 454 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

File diff suppressed because one or more lines are too long
+35
View File
@@ -0,0 +1,35 @@
# Package A2 report: Design System page cleanup
Date 2026-10-23. Project `Interview` (fileName verified). Page `Design System` only. Evidence in `A2/`: `issues-before.json` (all 959 issues, linted per top-level frame to avoid the 200 cap), `issues-7.json` (final), `after-brand-swatch.png`, `after-components.png`. Backup: `/Volumes/Storage/Projects/Interview.backup-20261023-0112`.
## Lint counts (DS page, byRule, exact)
| rule | before A2 | after A2 | pre-A baseline |
|---|---|---|---|
| contrast (errors) | 194 | **0** | 128 (67 on original components) |
| hard-coded-color | 366 | **7** | 11 |
| spacing-grid | 180 | **0** | 57 |
| touch-target | 30 | 30 (accepted, see below) | 16 |
| type-scale (info) | 135 | 135 (not in scope) | 42 |
| layer-name | 49 | 49 (not in scope) | 7 |
Goal met: contrast 0 (target <= 67).
## What changed
- Hard-coded colours: 359 nodes bound by exact hex match (352 text colours, 12 fills) via `update_styles` `var(--color-...)`. White text bound to `color/text/inverse`, not `bg/surface` (same hex, text role). Note: `bind_variable text-color` was not recognised by lint, `update_styles color:var()` was; use that.
- Contrast (SYS-05, A11Y checked with `playbook contrast` maths, all pairs >= 4.5):
- white on `#1677ff`/`#4096ff` -> parent fills rebound to `color/brand/primary-strong` (#0958d9, 6.16); 16 fills + 5 matching 1px strokes bound.
- white on `#52c41a` (Score Dots) -> `color/status/success-text` (#237804, 5.59); white on `#ff4d4f` -> `color/status/error` (5.57).
- `#5a5a5a` on `#1a1a1a` -> `color/ide/text-muted` (4.91); `#888`/`#666` on `#252526|#2a2a2a|#252525|#181818|#161616` -> `color/ide/text-dim` (>= 7.5); `#5a80a8` on `#1c2a40` -> `ide/text-dim`; `#13a8a8` on `#1a3540` -> `syntax/type` (6.33); sidebar `#64676c` -> `sidebar/text-muted` (4.51).
- `#8c8c8c`/`#bfbfbf`/`#bbb`/`#878787`/`#848484` on light -> `color/text/secondary` (6.7-7.0). Note placeholders and disabled input text now read as secondary text; disabled look is carried by the grey fill only.
- `#52c41a`, `#16a34a` text on light -> `status/success-text`; white on `#faad14`/`#13a8a8` (Score Dots 2, Theory Next) -> `color/text/primary`.
- Variable VALUES changed (global, affects Admin and Candidate too, all pairs now pass): `color/tag/gold/text` #ad6800 -> #874d00, `color/tag/green/text` #389e0d -> #237804, `color/tag/cyan/text` #08979c -> #006d75. Bound fills followed automatically.
- `Pipeline Row / Dark` was a transparent component meant for a dark card: gave it `color/ide/card` background, stage text `ide/text-muted`, name `text/inverse`.
- Spacing: all 180 off-grid nodes bound to `space/*` (nearest in-scale value: 1,2,3,5->4; 6,7,9->8; 10,11->12; 14,18->16; 22->24; gap 6->8). On-grid padding was not rebound (would be thousands of bindings with no lint effect). Visual check of buttons, tags, rows, toolbars: nothing broke.
- Radii: all uniform radii bound to `radius/*`: 289 -> sm (3,4,5), 442 -> md (6,7,8), 75 -> lg (12), 153 -> pill (99,999). Multi-value radii (per-corner) not touched; no radii above 12 other than the pill ones existed.
- Colors board: added swatch `color-brand-primary-strong` (#0958d9) in the Brand card.
- `Label / *` stubs: they are plain label frames, not components (`get_components` lists none), and each captions a real component at x=30000. Deleted only the 5 whose component has 0 instances (`Link Field / Copied`, `Challenge Option / Two Sum Off`, `... / URL shortener On`, `... / JavaScript closures Off`, `Timeline / Step 3`). The other 10 kept because their component has instances. Delete them too if you read the instruction as "all 15".
## Skipped / accepted
- 7 hard-coded: `#000000` text on `Stars / 0..5` (6, no exact variable; `text/primary` is #000000e0, near match not in the audit mapping) and `#bae0ff` on `Funnel Row` (1, no variable).
- Touch targets (30): `Button *` SM 24-28, MD 32-34, LG 40, `Button / Undo|Clear|Delete` 24, bell 36. Accepted desktop density: playbook A11Y-09 (24 px AA minimum, 44 default on touch only) and PAT-06 (about 27-30 px practical floor for dense content). All >= 24 px. Annotation on the DS page already documents it. Candidate pages are desktop IDE flows.
- Untouched (out of scope): type-scale 135, layer-name 49, `brand/hover` (#4096ff) with white text (state unused).
- Side effect to check: `set_variables` (tag text values) made lint report hard-coded text again on untouched nodes (text bindings seemed to be flattened for some nodes on the DS page); rebinding fixed it. Admin/Candidate pages were not inspected for this; if B/C see text colours turn literal, that is the cause.
File diff suppressed because one or more lines are too long
Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Some files were not shown because too many files have changed in this diff Show More