Improve foreach docs examples

[Alek99]

Summary

• clarify when to use rx.foreach versus Python comprehensions
• update foreach callback annotations to use rx.Var[...]
• improve demo styling so color and dictionary examples render readably
• make todo example buttons visible and wire finish_item as an event handler

Testing

• Ran docs app locally with CI=1 and whitelisted /library/dynamic-rendering/foreach
• Verified the page in the Codex in-app browser at http://localhost:3000/docs/library/dynamic-rendering/foreach/
• Confirmed the todo Done button removes an item from the rendered list
• Ran git diff --check

[greptile-apps]

Greptile Summary

This PR improves the rx.foreach documentation page: callback annotations are updated to rx.Var[...], color examples are replaced with readable hex swatches, the todo example gains proper UUID-based item identity and a wired "Done" button, and a dictionary-key coercion note is added. The structural change to watch is the removal of the YAML frontmatter that other component docs pages rely on for auto-generated API reference embedding.

• Annotation and styling improvements are clear wins: rx.Var[...] annotations are now consistent across all callback signatures, and the demo components render visibly without relying on CSS named colors as both label and background.
• The todo example is substantially improved with a TodoItem dataclass, UUID-based keying for React reconciliation, and finish_item correctly decorated with @rx.event.
• The YAML frontmatter (components: - rx.foreach) was removed and replaced with a manually written API Reference section; other component pages retain this frontmatter for auto-generated prop tables, so its removal may silently drop documentation and affect search/navigation indexing.

Confidence Score: 4/5

The content changes are solid, but the frontmatter removal drops the auto-generated component API table that every other docs page in the library section relies on.

Cross-checking five other component docs pages (box, aspect_ratio, center, card, html/text) confirms they all keep the components frontmatter block so the docs system can embed the full prop reference. Stripping it from foreach.md means readers lose that auto-generated table, and depending on how the docs build uses the key, it may also break search indexing or the component registry for this page.

docs/library/dynamic-rendering/foreach.md — the removed YAML frontmatter and the inaccurate iterable-type list in the manual API Reference section both need a second look before merging.

Important Files Changed

Filename	Overview
docs/library/dynamic-rendering/foreach.md	Rewrites foreach docs with hex-color swatches, UUID-keyed todo items, updated rx.Var annotations, and a manual API Reference section — but removes the frontmatter that drives auto-generated component API docs, and the new API Reference section lists unsupported iterable types (sets, strings).

_{Reviews (2): Last reviewed commit: "Address foreach docs review comments" | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 24 untouched benchmarks

---

_{Comparing fix-foreach-docs (0d7cada) with main (cf5e4ed)}

[Alek99]

Updated the complex dictionary example layout after local review: it now renders the three secondary colors as three grouped columns with spacing instead of wrapping the third group underneath.

[Alek99]

Updated the color examples again after visual review: they now use explicit site-friendly hex colors and a shared rounded color_swatch helper. The complex dictionary example renders the parent colors as swatches too, so the top row matches the child swatches.

[Alek99]

Simplified the swatch examples after review: the basic color example is back to List[str], and the complex dictionary example is back to Dict[str, List[str]]. The strings are now site-friendly hex colors, so the rendered swatches stay polished without introducing nested tuple data structures.

[masenf]

The API Reference at the bottom of this page seems weird. It only shows the iterable prop, which mismatches with how the foreach component is supposed to be used.

[masenf]

@greptile