feat(a2ui): add icon catalog by HuJean · Pull Request #2618 · lynx-family/lynx-stack

HuJean · 2026-05-13T02:31:59Z

Summary by CodeRabbit

New Features
- Introduced Icon component with Material Icons Round support, plus size (sm, md, lg) and color (primary, muted, inherit) options
- Icon is now included as a built-in component in the A2UI catalog and playground
- Playground component props are now generated from component manifests for more accurate prop editing

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

changeset-bot · 2026-05-13T02:32:03Z

🦋 Changeset detected

Latest commit: 62fd9c8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

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

Not sure what this means? Click here to learn what changesets are.

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

coderabbitai · 2026-05-13T02:32:12Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2d399324-923a-491e-b26d-6602d2776472

📥 Commits

Reviewing files that changed from the base of the PR and between 772fb0b and 62fd9c8.

📒 Files selected for processing (11)

.changeset/a2ui-icon-component.md
packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
packages/genui/a2ui-playground/lynx-src/a2ui/index.css
packages/genui/a2ui-playground/src/catalog/a2ui.ts
packages/genui/a2ui-playground/src/styles.css
packages/genui/a2ui/package.json
packages/genui/a2ui/src/catalog/Icon/index.tsx
packages/genui/a2ui/src/catalog/index.ts
packages/genui/a2ui/src/index.ts
packages/genui/a2ui/styles/catalog/Icon.css
packages/genui/a2ui/styles/theme.css

✅ Files skipped from review due to trivial changes (3)

packages/genui/a2ui-playground/src/styles.css
.changeset/a2ui-icon-component.md
packages/genui/a2ui/src/index.ts

🚧 Files skipped from review as they are similar to previous changes (5)

packages/genui/a2ui/src/catalog/index.ts
packages/genui/a2ui/styles/catalog/Icon.css
packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
packages/genui/a2ui/src/catalog/Icon/index.tsx
packages/genui/a2ui-playground/src/catalog/a2ui.ts

📝 Walkthrough

Walkthrough

Adds an Icon catalog component (implementation, CSS, and exports), registers it in the A2UI playground, and refactors the playground catalog to generate component prop metadata from JSON schema manifests. A Changeset documents a patch release.

Changes

Icon Component & Catalog Metadata

Layer / File(s)	Summary
Icon Component Definition & Styling `packages/genui/a2ui/src/catalog/Icon/index.tsx`, `packages/genui/a2ui/styles/catalog/Icon.css`	Defines `IconProps` (`name`, `size`, `color`), `toMaterialName` helper, `Icon` renderer producing a `<text>` node, and adds base, size, and color CSS variants.
Export Wiring & Package Configuration `packages/genui/a2ui/package.json`, `packages/genui/a2ui/src/catalog/index.ts`, `packages/genui/a2ui/src/index.ts`	Adds `./styles/theme.css` and `./catalog/Icon` exports in package.json and re-exports `Icon` from the catalog barrel and main package entry.
Playground App Integration `packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx`, `packages/genui/a2ui-playground/src/styles.css`	Imports `Icon` and `Icon/catalog.json`, registers `[Icon, iconManifest]` in `ALL_BUILTINS`, and imports the package theme CSS into playground styles.
Schema-Driven Catalog Props Metadata `packages/genui/a2ui-playground/src/catalog/a2ui.ts`	Adds `inferType` and `schemaToProps` helpers to convert component `catalog.json` schemas into `ComponentProp[]` and refactors many catalog entries (Text, Icon, Image, Divider, Card, Row, Column, List, Button, CheckBox, RadioGroup) to use generated props.
Release Documentation `.changeset/a2ui-icon-component.md`	New changeset documenting the patch release with Icon component and Material Icons Round support.

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

lynx-family/lynx-stack#2611: Edits to packages/genui/a2ui-playground/src/catalog/a2ui.ts affecting ProtocolName import and catalog handling.

Suggested reviewers

PupilTong
Sherry-hue
gaoachao
fzx2666-fz

Poem

"A rabbit inks a tiny glyph today,
Hops through schemas, props in tidy rows;
A material name transformed to play,
Styled in sizes where the round font glows.
Hooray — the Icon joins the garden shows!"

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat(a2ui): add icon catalog' clearly and directly summarizes the main change: introducing a new Icon catalog component to the a2ui package.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch p/a2ui-icon

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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

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

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/genui/a2ui-playground/src/catalog/a2ui.ts (1)
70-73: ⚡ Quick win

Consider defensive handling for empty manifests.

Lines 71-72 assume the manifest has at least one key (const key = Object.keys(manifest)[0]). If an empty manifest is passed, key will be undefined, and line 73 will attempt to access manifest[undefined], returning undefined and potentially causing issues downstream.
🛡️ Proposed defensive check
 function schemaToProps(manifest: Record<string, unknown>): ComponentProp[] {
   const key = Object.keys(manifest)[0];
-  if (!key) return [];
+  if (!key) {
+    console.warn('schemaToProps: manifest is empty', manifest);
+    return [];
+  }
   const schema = manifest[key] as PropSchema;
🤖 Prompt for 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.

In `@packages/genui/a2ui-playground/src/catalog/a2ui.ts` around lines 70 - 73, In
schemaToProps, guard against an empty manifest before using
Object.keys(manifest)[0]: check if Object.keys(manifest).length === 0 (or if
!key after computing it) and return an empty array immediately to avoid
accessing manifest[undefined]; ensure the rest of the function continues to
treat schema as PropSchema only when key is defined so downstream code doesn't
receive undefined.

🤖 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 `@packages/genui/a2ui/src/catalog/Icon/index.tsx`:
- Around line 17-26: IconProps declares name as string | { path: string } but
Icon currently casts name to string then calls toMaterialName, risking runtime
errors; update the Icon implementation (function Icon) to branch on the runtime
type of props.name: if it's a string call toMaterialName(name), if it's an
object extract name.path and pass that to toMaterialName (or handle missing path
defensively), and ensure any downstream code that expects iconName uses the
normalized string; keep references to IconProps, Icon, and toMaterialName when
locating the change.

---

Nitpick comments:
In `@packages/genui/a2ui-playground/src/catalog/a2ui.ts`:
- Around line 70-73: In schemaToProps, guard against an empty manifest before
using Object.keys(manifest)[0]: check if Object.keys(manifest).length === 0 (or
if !key after computing it) and return an empty array immediately to avoid
accessing manifest[undefined]; ensure the rest of the function continues to
treat schema as PropSchema only when key is defined so downstream code doesn't
receive undefined.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 29505f98-9eed-4d61-b005-7ed407155119

📥 Commits

Reviewing files that changed from the base of the PR and between 482d842 and 772fb0b.

📒 Files selected for processing (11)

.changeset/a2ui-icon-component.md
packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
packages/genui/a2ui-playground/lynx-src/a2ui/index.css
packages/genui/a2ui-playground/src/catalog/a2ui.ts
packages/genui/a2ui-playground/src/styles.css
packages/genui/a2ui/package.json
packages/genui/a2ui/src/catalog/Icon/index.tsx
packages/genui/a2ui/src/catalog/index.ts
packages/genui/a2ui/src/index.ts
packages/genui/a2ui/styles/catalog/Icon.css
packages/genui/a2ui/styles/theme.css

codecov · 2026-05-13T02:48:18Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

codspeed-hq · 2026-05-13T02:54:58Z

Merging this PR will improve performance by 17.62%

⚠️

Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
✅ 80 untouched benchmarks
⏩ 26 skipped benchmarks¹

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
⚡	`transform 1000 view elements`	47 ms	40 ms	+17.62%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.

_{Comparing p/a2ui-icon (62fd9c8) with main (705a3a3)²}

26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩
No successful run was found on main (482d842) during the generation of this report, so 705a3a3 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

relativeci · 2026-05-13T02:55:07Z

React Example

#8127 Bundle Size — 236.51KiB (0%).

62fd9c8(current) vs 705a3a3 main#8102(baseline)

Bundle metrics no changes

	Current #8127	Baseline #8102
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`197`	`197`
Duplicate Modules	`80`	`80`
Duplicate Code	`44.87%`	`44.87%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8127	Baseline #8102
IMG	`145.76KiB`	`145.76KiB`
Other	`90.75KiB`	`90.75KiB`

Bundle analysis report Branch p/a2ui-icon Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-13T02:55:09Z

Web Explorer

#9701 Bundle Size — 901.38KiB (0%).

62fd9c8(current) vs 705a3a3 main#9676(baseline)

Bundle metrics

1 change

	Current #9701	Baseline #9676
Initial JS	`45.06KiB`	`45.06KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`229`(`+0.44%`)	`228`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.22%`	`27.22%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #9701	Baseline #9676
JS	`497.1KiB`	`497.1KiB`
Other	`402.06KiB`	`402.06KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch p/a2ui-icon Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-13T02:56:29Z

React Example with Element Template

#393 Bundle Size — 197.79KiB (0%).

62fd9c8(current) vs 705a3a3 main#369(baseline)

Bundle metrics

1 change

	Current #393	Baseline #369
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`80`	`80`
Duplicate Modules	`23`	`23`
Duplicate Code	`40.31%`(`+0.02%`)	`40.3%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #393	Baseline #369
IMG	`145.76KiB`	`145.76KiB`
Other	`52.03KiB`	`52.03KiB`

Bundle analysis report Branch p/a2ui-icon Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-13T02:58:51Z

React External

#1241 Bundle Size — 693.04KiB (0%).

62fd9c8(current) vs 705a3a3 main#1216(baseline)

Bundle metrics no changes

	Current #1241	Baseline #1216
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`17`	`17`
Duplicate Modules	`5`	`5`
Duplicate Code	`8.59%`	`8.59%`
Packages	`0`	`0`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1241	Baseline #1216
Other	`693.04KiB`	`693.04KiB`

Bundle analysis report Branch p/a2ui-icon Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-13T02:58:53Z

React MTF Example

#1259 Bundle Size — 207.46KiB (0%).

62fd9c8(current) vs 705a3a3 main#1234(baseline)

Bundle metrics no changes

	Current #1259	Baseline #1234
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`192`	`192`
Duplicate Modules	`77`	`77`
Duplicate Code	`44.38%`	`44.38%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1259	Baseline #1234
IMG	`111.23KiB`	`111.23KiB`
Other	`96.23KiB`	`96.23KiB`

Bundle analysis report Branch p/a2ui-icon Project dashboard

^{Generated by RelativeCI Documentation Report issue}

HuJean requested review from PupilTong, Sherry-hue, fzx2666-fz and gaoachao as code owners May 13, 2026 02:32

coderabbitai Bot reviewed May 13, 2026

View reviewed changes

Comment thread packages/genui/a2ui/src/catalog/Icon/index.tsx

feat(a2ui): add icon catalog

62fd9c8

HuJean force-pushed the p/a2ui-icon branch from 772fb0b to 62fd9c8 Compare May 13, 2026 02:37

Sherry-hue approved these changes May 13, 2026

View reviewed changes

HuJean enabled auto-merge (squash) May 13, 2026 04:06

HuJean merged commit 4fce2bb into main May 13, 2026
83 of 86 checks passed

HuJean deleted the p/a2ui-icon branch May 13, 2026 04:08

This was referenced May 14, 2026

feat(a2ui): add TextField catalog component #2635

Merged

feat: refine A2UI unsupported handling #2644

Merged

feat(a2ui): support Tabs #2649

Merged

feat(a2ui): add Modal catalog component #2653

Open

chore: remove changeset files #2655

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(a2ui): add icon catalog#2618

feat(a2ui): add icon catalog#2618
HuJean merged 1 commit into
mainfrom
p/a2ui-icon

HuJean commented May 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented May 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 13, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

codecov Bot commented May 13, 2026 •

edited

Loading

Uh oh!

codspeed-hq Bot commented May 13, 2026

Uh oh!

relativeci Bot commented May 13, 2026 •

edited

Loading

Uh oh!

relativeci Bot commented May 13, 2026 •

edited

Loading

Uh oh!

relativeci Bot commented May 13, 2026 •

edited

Loading

Uh oh!

relativeci Bot commented May 13, 2026 •

edited

Loading

Uh oh!

relativeci Bot commented May 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

HuJean commented May 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codspeed-hq Bot commented May 13, 2026

Merging this PR will improve performance by 17.62%

Performance Changes

Footnotes

Uh oh!

relativeci Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#8127 Bundle Size — 236.51KiB (0%).

Uh oh!

relativeci Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#9701 Bundle Size — 901.38KiB (0%).

Uh oh!

relativeci Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example with Element Template

#393 Bundle Size — 197.79KiB (0%).

Uh oh!

relativeci Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#1241 Bundle Size — 693.04KiB (0%).

Uh oh!

relativeci Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#1259 Bundle Size — 207.46KiB (0%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HuJean commented May 13, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented May 13, 2026 •

edited

Loading

coderabbitai Bot commented May 13, 2026 •

edited

Loading

codecov Bot commented May 13, 2026 •

edited

Loading

relativeci Bot commented May 13, 2026 •

edited

Loading

relativeci Bot commented May 13, 2026 •

edited

Loading

relativeci Bot commented May 13, 2026 •

edited

Loading

relativeci Bot commented May 13, 2026 •

edited

Loading

relativeci Bot commented May 13, 2026 •

edited

Loading