Add Frame and Overlay elements + CAD toolbar example

[Sheerwin02]

Resolve #26

New Elements (fynix_elements)

Frame

A decorative container that wraps a single child with: (Frame draws a background fill with rounded corners around its child; Pad is invisible spacing only.)

• Background fill
• Rounded corners
• Per-side insets

Handles the common pattern of drawing a filled rounded rectangle behind content.

Overlay

A positioning container designed for popups, tooltips, and dropdowns. Overlay walks up the parent tree from the anchor element to compute its absolute position, then places its content at that spot.

Features:

• Anchor-based positioning (place relative to any child element)
• Automatic flip on overflow (switches to the opposite side when content does not fit)
• Viewport clamping
• Configurable side, gap, alignment, and offset

---

New Example: CAD Toolbar

Added a comprehensive CAD toolbar example demonstrating Fynix's UI capabilities:

• Style rules
• Reactive bindings
• Composable elements:
  • ToolButton
  • IconLabelButton
  • MenuBarItem
• New Frame and Overlay elements

Features Demonstrated

• Tool palette with:
  • Selection tools
  • Drawing tools
  • Modification tools
• Undo/redo stack
• Dropdown panels anchored to toolbar buttons
• Toggle flags:
  • Snap
  • Grid
  • Ortho
• Status bar with hover hints
• Keyboard shortcuts

[coderabbitai]

Warning

Review limit reached

@Sheerwin02, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 15 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8d3663f3-90f9-4c3e-ba88-63aa443ec054

📥 Commits

Reviewing files that changed from the base of the PR and between f2092b7 and f36e3ac.

📒 Files selected for processing (5)

• crates/fynix/src/reactive/binding.rs
• crates/fynix_elements/src/lib.rs
• examples/vello_winit_examples/examples/toolbar/builders.rs
• examples/vello_winit_examples/examples/toolbar/elements.rs
• examples/vello_winit_examples/examples/toolbar/main.rs

📝 Walkthrough

Walkthrough

The PR refactors Fynix reactive callbacks and interaction handlers, adds Frame and Overlay elements, updates DPI-aware keyboard and pointer handling, and introduces an interactive CAD toolbar example with dropdowns, bindings, undo/redo, and themed controls.

Changes

Fynix reactive and interaction core

Layer / File(s)	Summary
Reactive callback and component storage contracts crates/fynix/src/reactive.rs, crates/fynix/src/reactive/*	Change detectors, watchers, and bindings now store boxed callable traits; bindings use typed getter/setter closures and are no longer Copy or Clone.
Interaction APIs and synchronization crates/fynix/src/interaction.rs, crates/fynix/src/ctx.rs, crates/fynix/src/lib.rs, examples/vello_winit_examples/examples/hello_world.rs	Handlers accept capturing callables through HandlerFn, interact_with is removed, and synchronization removes non-copy watchers and bindings before updating them.

Layout and example runtime

Layer / File(s)	Summary
Frame and anchored overlay layout crates/fynix_elements/src/lib.rs	Adds padded rounded frames and overlays with alignment, anchoring, clipping, flipping, and viewport clamping.
DPI-aware rendering and keyboard dispatch examples/vello_winit_examples/src/lib.rs	Renders logical UI scenes with scale transforms, converts pointer and resize coordinates, and dispatches keyboard events with modifiers.

Interactive toolbar example

Layer / File(s)	Summary
Interactive CAD toolbar example examples/vello_winit_examples/examples/toolbar/*	Adds themed tool state, toolbar controls, dropdown panels, reactive hints and fills, undo/redo actions, keyboard tool selection, and application composition.

Estimated code review effort: 5 (Critical) | ~120 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Input
  participant CadWorld
  participant Fynix
  participant Toolbar
  participant Overlay
  Input->>CadWorld: tool or dropdown action
  CadWorld->>Fynix: updated world state
  Fynix->>Toolbar: rebuild changed controls
  Toolbar->>Overlay: create anchored dropdown
  Overlay->>Input: render positioned toolbar UI

Loading

Possibly related PRs

• voxell-tech/fynix#41: Related interaction and handler abstraction changes.
• voxell-tech/fynix#53: Related watcher and binding synchronization changes.
• voxell-tech/fynix#56: Related HandlerFn and ElementCtx::interact changes.

Suggested reviewers: nixonyh

Poem

A rabbit hops through buttons bright,
With dropdowns tucked just out of sight.
Frames and overlays neatly align,
While watchers rebuild by design.
DPI winds make pixels dance—
Keyboard tools leap at a glance!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 4.76% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main additions: new Frame/Overlay elements and the CAD toolbar example.
Description check	✅ Passed	The description is directly about the new elements and CAD toolbar example introduced by this PR.
Linked Issues check	✅ Passed	The PR implements the linked toolbar UI example request by adding a full CAD toolbar demo.
Out of Scope Changes check	✅ Passed	The changes are centered on the requested toolbar example and supporting UI elements, with no clear unrelated additions.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@crates/fynix_elements/src/lib.rs`:
- Around line 596-649: The anchor overflow and clamping logic in
resolve_anchor_offset currently assumes the local anchor coordinates start at
(0, 0), which is incorrect for nested overlays. Propagate the viewport origin
through the anchor-position computation or convert the anchor position into root
coordinates, then use that same coordinate frame for overflows and clamping
while preserving the existing flip behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c687e88d-ca6f-43b4-ac04-2efca1de378c

📥 Commits

Reviewing files that changed from the base of the PR and between 468e0c2 and f2092b7.

📒 Files selected for processing (14)

• crates/fynix/src/ctx.rs
• crates/fynix/src/interaction.rs
• crates/fynix/src/lib.rs
• crates/fynix/src/reactive.rs
• crates/fynix/src/reactive/binding.rs
• crates/fynix/src/reactive/watcher.rs
• crates/fynix_elements/src/lib.rs
• examples/vello_winit_examples/examples/hello_world.rs
• examples/vello_winit_examples/examples/toolbar/builders.rs
• examples/vello_winit_examples/examples/toolbar/elements.rs
• examples/vello_winit_examples/examples/toolbar/helpers.rs
• examples/vello_winit_examples/examples/toolbar/main.rs
• examples/vello_winit_examples/examples/toolbar/theme.rs
• examples/vello_winit_examples/src/lib.rs