feat(editor): add inspector UI primitives

[joaopcm]

Summary

• Creates 10 UI primitive components (Label, Text, TextField, Textarea, Select, ToggleGroup, Tooltip, IconButton, Button, ColorInput)
• Follows BubbleMenuItem pattern: plain HTML, data-re-* attributes, CSS custom properties
• Adds CSS styles for all new primitives
• Includes smoke tests + interaction tests (25 tests)

Stacks on #3170

---

Summary by cubic

Adds 10 inspector UI primitives and a minimal layout-only stylesheet to standardize inspector structure and enable consistent theming.

• New Features
  • Components: Label, Text, TextField, Textarea, Select (Root/Item), ToggleGroup (Root/Item), Tooltip (Root/Trigger/Content), IconButton, Button, ColorInput.
  • Behaviors: plain HTML with data-re-inspector-* attrs and CSS vars; Button/IconButton default to type="button" (Button supports data-variant); Text supports data-size/data-color; TextField/Textarea forward refs (Textarea sets data-type="textarea"); ToggleGroup is controlled and sets data-active/aria-pressed; ColorInput keeps color picker and hex input in sync and normalizes hex.
  • Optional layout CSS at @react-email/editor/styles/inspector.css (layout only, no visual design).

^{Written for commit 6ee1074. 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-email	Ready	Preview, Comment	Apr 2, 2026 8:35pm
react-email-demo	Ready	Preview, Comment	Apr 2, 2026 8:35pm
react-email-examples	Ready	Preview, Comment	Apr 2, 2026 8:35pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6ee1074

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/editor@3171

commit: 6ee1074

[cubic-dev-ai]

2 issues found across 16 files

Confidence score: 3/5

• There is a concrete regression risk in packages/editor/src/ui/inspector/primitives/toggle-group.tsx: spreading ...rest after the internal onClick allows consumers to override selection updates, which can break toggle interaction behavior.
• The test issue in packages/editor/src/ui/inspector/primitives/select.spec.tsx is lower severity, but it weakens confidence because the assertion only checks that onChange fired rather than validating the selected value.
• Score is 3 because the toggle-group handler ordering issue is user-facing (severity 6/10, high confidence), while the test mismatch is a smaller quality gap; this looks fixable without broad architectural risk.
• Pay close attention to packages/editor/src/ui/inspector/primitives/toggle-group.tsx and packages/editor/src/ui/inspector/primitives/select.spec.tsx - event handling precedence may break selection state, and the test should assert the actual value to prevent regressions.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/editor/src/ui/inspector/primitives/select.spec.tsx">

<violation number="1" location="packages/editor/src/ui/inspector/primitives/select.spec.tsx:27">
P2: The test name says it verifies the selected value, but the assertion only checks that `onChange` was called. Assert the event value to ensure the behavior under test is actually validated.</violation>
</file>

<file name="packages/editor/src/ui/inspector/primitives/toggle-group.tsx">

<violation number="1" location="packages/editor/src/ui/inspector/primitives/toggle-group.tsx:48">
P2: `...rest` is spread after the internal `onClick`, so consumer-provided `onClick` can override selection updates and break toggle behavior.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[joaopcm]

Auto-merge enabled (squash) via PR Sentinel.