[Page] Update: Expand editor stage with widget state and new component replacements

[jiaxin-915]

Issue

Background

This update expands the editor-stage page by adding a new widget state page and aligning several existing subpages with the latest component designs.

Changes

• Updated editor-stage.pen under ui/pages
• Added a new page for the widget state
• Replaced components in the code page with the new design components
• Replaced components in the backdrop page with the new design components
• Replaced components in the sound page with the new design components

Scope

• Editor stage page
• Widget state page
• Code page
• Backdrop page
• Sound page

Design System Impact

• Yes
• No

[gemini-code-assist]

Code Review

This pull request updates the editor-stage.pen UI definition file, renaming several frames (Sound, Backdrop, Code, Widget) and adjusting their coordinates, dimensions, and component references. The reviewer identified several opportunities for improvement: rounding sub-pixel coordinate noise to zero for better alignment, ensuring consistent width and height for the panel-right frame across all sections, and standardizing the naming and structural layout of the Widget frame to maintain consistency with other editor stages.

[gemini-code-assist]

The x coordinate value 0.011189733001048491 appears to be sub-pixel noise introduced by a design tool. It should be rounded to 0 to ensure precise alignment. This same issue is present on lines 184, 286, and 392.

"x": 0,

[gemini-code-assist]

The panel-right frame has explicit width and height set here and in the Widget section (line 369), but these dimensions are missing from the Code and Backdrop sections. For consistency across the editor stages, these should likely be applied uniformly.

[gemini-code-assist]

The frame name Frame 1010106326 appears to be an auto-generated identifier from a design tool. It should be renamed to content to maintain consistency with the other frames in this file (e.g., Sound, Backdrop, Code).

"name": "content",

[gemini-code-assist]

The Widget frame introduces several structural and layout inconsistencies compared to the Sound, Backdrop, and Code frames:

1. Missing Wrapper: It directly references G:ygUhS (line 361) without the G:qEHhD wrapper used by the other frames.
2. Dimensions & Position: Its height is 900 (vs 910) and its y coordinate is -63 (vs -66 or -68).
3. Layout Properties: It uses padding and height: fill_container on its content frame, and the alignItems: center property was removed from the top-level frame (line 325 in the previous version).

Please verify if these changes are intentional parts of the new design or if the Widget frame should be aligned with the existing structure.

[fennoai]

This PR reorganizes the four editor-stage page states and introduces a new Widget layout. The changes are largely mechanical ID/position shuffles. A few structural and consistency issues are worth addressing before merge.

[fennoai]

Undocumented naming convention change. Top-level frame names changed from lowercase (code, widget, backdrop, sound) to Title Case (Code, Backdrop, Sound, Widget) across all four frames. If any tooling or tests match frames by the name field (e.g. findNodesByName in the conformance test), this is a breaking change. The PR description does not mention it — worth calling out explicitly.

[fennoai]

Inconsistent panel-right dimensions. The Sound frame's panel-right has explicit "width": 496, "height": 830 added here (and Widget's does too), but the equivalent panel-right frames in Backdrop and Code have no size constraints at all. If these pages are meant to depict the same layout shell, the constraints should be applied uniformly or omitted uniformly.

[fennoai]

Floating-point x-coordinate artifact. "x": 0.011189733001048491 is an export rounding artifact — the intended value is 0. This same value appears on the equivalent ref inside panel-right across all four pages (lines ~82, ~184, ~286, ~392). The sibling editor-sprite.pen uses a clean 0 for the equivalent nodes. Consider normalizing to 0 to keep diffs clean and avoid sub-pixel drift accumulating across future exports.

[fennoai]

Widget frame height differs from peers. This frame uses "height": 900 while Sound, Backdrop, and Code all use "height": 910. The 10 px discrepancy is undocumented — intentional design difference or copy-paste omission?

[fennoai]

Widget frame is missing gap and alignItems. The other three top-level frames (Sound, Backdrop, Code) all declare "gap": 20 and "alignItems": "center" on their root layout frame. Widget omits both. Without gap: 20, the header ref and the content frame stack without spacing; without alignItems: center, content will be left-aligned in the 1440 px viewport — a visual regression versus the other states.

[fennoai]

Auto-generated placeholder name not cleaned up. "name": "Frame 1010106326" is a default tool-generated name. Every equivalent content container in the other three pages uses "name": "content". This should be renamed to "content" for consistency and to avoid silent mismatches in any tooling that locates nodes by name.