Skip to content

Convert Export PNG button into Export dropdown with PNG and clipboard#93

Merged
mucow24 merged 1 commit into
mainfrom
claude/busy-kowalevski-6a40cc
May 3, 2026
Merged

Convert Export PNG button into Export dropdown with PNG and clipboard#93
mucow24 merged 1 commit into
mainfrom
claude/busy-kowalevski-6a40cc

Conversation

@mucow24
Copy link
Copy Markdown
Owner

@mucow24 mucow24 commented May 3, 2026

Summary

  • Turns the toolbar's bright-blue Export PNG button into an Export dropdown with two destinations: PNG (existing download) and To clipboard (writes `image/png` via `navigator.clipboard.write([new ClipboardItem(...)])`).
  • Trigger keeps the bright-blue glowing styling — only label + caret on the trigger, the download-arrow icon moves into the PNG menu item; a new clipboard glyph labels the second item.
  • Click-to-close on the trigger blurs it so a subsequent mouse-leave actually clears the export-bounds cue (browser focus would otherwise pin it lit).
  • "Copied to clipboard" status bubble (reuses existing `useStatusToast`) confirms success; clipboard API errors surface via the existing app error banner.

Test plan

  • `npm run preflight` passes (lint, typecheck, 663 unit tests, 130 e2e tests)
  • New unit test for `copyCanvasToClipboard` (mocks `navigator.clipboard.write` + `ClipboardItem`)
  • New Toolbar test for the click-then-mouse-away cue regression
  • New e2e test asserts clipboard write contains an `image/png` ClipboardItem starting with the PNG magic bytes
  • Existing FL-04 / FL-10 / e2e specs updated to drive the new dropdown
  • Manual: PNG download works, clipboard copy works (verified via paste), focus-mode cue clears correctly after click-then-leave

🤖 Generated with Claude Code

Adds "To clipboard" alongside the existing PNG download via
navigator.clipboard.write so designers can paste the canvas straight
into Figma/Slack without a download round-trip. Trigger keeps the
bright-blue glowing styling; the download arrow icon moves into the
PNG menu item and a clipboard glyph labels the new one.

Click-to-close on the trigger now blurs it so a subsequent mouse-leave
clears the export-bounds cue (browser focus would otherwise pin it).

Co-Authored-By: Claude Opus 4.7 <[email protected]>
@mucow24 mucow24 merged commit 9638a0a into main May 3, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant