feat(toolbar): add color picker that copies the picked color

[aidenybai]

Summary

Adds a color picker (eyedropper) action to the toolbar. Clicking it opens the browser's native eyedropper, and the picked color is copied to the clipboard with brief in-toolbar feedback showing a swatch and the copied hex value.

Behavior

• New Pick color button appears in the toolbar (after the Style button).
• Clicking it launches the native EyeDropper overlay so the user can sample any pixel on the page.
• On pick, the color is copied to the clipboard (uppercased hex, e.g. #1A2B3C) via the existing copyContent util, reusing its multi-format clipboard handling.
• For ~2s after picking, the button's tooltip shows a color swatch + Copied #RRGGBB and the icon is highlighted as confirmation.
• The button is only rendered when the EyeDropper API is supported (Chromium-based browsers), so it never shows as a no-op in Firefox/Safari.
• Picking a color is independent of selection mode — it does not toggle react-grab's element selection.

Implementation notes

• src/components/icons/icon-eyedropper.tsx — new filled SVG icon, consistent with the existing icon components.
• src/utils/is-eyedropper-supported.ts — small feature-detection util (one utility per file).
• src/types.ts — global ambient declaration for the EyeDropper browser API.
• src/constants.ts — COLOR_PICKER_ACTION_ID and COLOR_PICK_FEEDBACK_DURATION_MS.
• src/components/toolbar/index.tsx — handler + button wiring, picked-color signal, and feedback tooltip.

Testing

• New E2E spec e2e/toolbar-color-picker.spec.ts stubs the EyeDropper API and verifies the button renders, the picked color is written to the clipboard, and selection mode is not entered.
• pnpm build, pnpm typecheck, and pnpm lint pass.
• Full toolbar E2E suite passes (74 tests, including the 3 new ones).

  

---

Summary by cubic

Adds a Pick color action to the toolbar using the native EyeDropper API. It copies the selected color to the clipboard and shows brief in-toolbar confirmation.

• New Features
  • New Pick color button after Style.
  • Launches the native EyeDropper overlay to sample any pixel.
  • Copies uppercase hex (e.g., #1A2B3C) via existing copyContent.
  • Shows a swatch and “Copied #RRGGBB” tooltip for ~2s; highlights the icon.
  • Renders only when EyeDropper is supported; does not enter selection mode.

^{Written for commit 0fd3632. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-grab-storybook	Ready	Preview, Comment	Jun 30, 2026 6:43am
react-grab-website	Ready	Preview, Comment	Jun 30, 2026 6:43am

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@react-grab/cli@514

npm i https://pkg.pr.new/grab@514

npm i https://pkg.pr.new/react-grab@514

commit: 0fd3632