[Component] Feature: Add AnimationTabModal and copilot components

[jiaxin-915]

Issue

Background

This update expands the component library by adding the new Editor/AnimationTabModal component and a new set of copilot-related components.
It also includes fixes for input dropdown styles, mainly to improve text size consistency and border radius behavior across related input components.

Changes

• Added the new Editor/AnimationTabModal component
• Added eight new copilot component sets to support the copilot interaction flow
• Refined the copilot component library structure and reusable states
• Fixed input dropdown text size issues
• Fixed input dropdown corner radius inconsistencies
• Improved visual consistency for related input components

Scope

• ui/components/spx/builder-component.lib.pen
• Editor/AnimationTabModal
• Copilot component set
• Related input dropdown components

Design System Impact

• Yes
• No

[gemini-code-assist]

Note

Gemini is unable to generate a review for this pull request due to the file types involved not being currently supported.

[fennoai]

Code Review: Add AnimationTabModal and Copilot Components

This PR adds Editor/AnimationTabModal, eight copilot component sets, and two new CombinationTab variants to the Penpot design library. The component structure is generally sound. The following issues are worth addressing before the next handoff.

Note: GitHub declined inline comments because the diff exceeds the platform size limit; all findings are consolidated here instead.

---

Data Integrity

1. Width sentinel values grew ~50× (file lines ~38488, ~38560)

Variant-Boring (Bjo4r): 5.009e+22 → 2.409e+24; Variant-Primary (R1GYIk): 5.523e+22 → 2.656e+24. If these large floats encode a fill_container layout flag, the magnitude should be stable across saves. A 50× jump suggests floating-point accumulation in the design tool's serialization path. Please verify the canonical sentinel value and reset if needed.

2. Sub-pixel float imprecision on fixed-size containers (lines ~38721, ~39273)

"height": 1608.0000000000005 should be 1608; "height": 1023.9999999999999 should be 1024. These are structurally fixed containers — accumulated floating-point error can propagate into stacked layout computations in downstream tooling.

3. Perceptible rotation drift on input-box (line ~39333)

"rotation": 0.017214400057139954 is not a near-zero artifact — 0.017° is large enough to produce visible pixel misalignment on a 511×120 frame. The accompanying "width": 511.9999547915265 and "height": 120.10900313040409 are consistent with an accidentally-rotated frame whose bounding box was recalculated. Should be reset to "rotation": 0 with integer dimensions.

4. rotation: -720 in Copilot/CodeContainer/Apply (line ~149209)

The text element with content "游戏开始啦！" (id kOdFF) carries "rotation": -720. Two full counter-clockwise rotations render identically to 0° but indicate rotation drift or an accidental tool operation. Should be normalized to 0.

---

Design Token Misuse (new components)

5. $radius-3 used as gap value (~15 occurrences in new CombinationTab and AnimationTabModal components)

"gap": "$radius-3" applies a border-radius token to control flex spacing. The correct family for gaps is $space-N (used in 930+ other gap values throughout the file).

6. $space-2 used as cornerRadius in Copilot/CodeContainer/Inset (line ~148945)

"cornerRadius": "$space-2" applies a spacing token to a radius property. Replace with the appropriate $radius-N token.

7. Mixed $border-radius-N / $radius-N cornerRadius families (lines ~41415, ~148993, ~149225)

New CombinationTab/TextIcon/TagLeadingDefault, TagTrailingDefault, and several copilot components use $border-radius-N; the dominant convention in the file is $radius-N (~800 occurrences vs ~27). If both families resolve to the same values this is a naming inconsistency; if they differ it is a semantic bug.

---

Naming & Structure

8. Duplicate name for Editor/AnimationTabModal (lines ~98338 and ~99524)

Two frames share this name — one is a non-reusable showcase container, the other is the actual reusable: true component. The showcase frame should follow the established Docs/ prefix convention (e.g. "Docs/AnimationTabModal/States"), matching Docs/CopilotSendButton/States and similar patterns.

9. Docs/Copilot* naming diverges from convention (lines ~146268+)

All eight new Copilot documentation frames use Docs/CopilotSendButton/States (namespace merged into name). The existing pattern for namespaced components is Docs/<Name>/States using the plain component name without its namespace prefix — which for Copilot/SendButton would be Docs/Copilot/SendButton/States. Consider aligning, or documenting the new convention explicitly.

10. Copilot/Status missing Success variant (line ~148658)

Only Copilot/Status/Warning and Copilot/Status/Error are defined. Other status-bearing components that expose Warning also expose Success. If the omission is intentional (copilot status only signals degraded states), a design annotation on the component would document the deliberate gap.

---

Minor

• PR description does not mention the two new CombinationTab/TextIcon/TagLeadingDefault and TagTrailingDefault reusable components. These are first-class additions worth listing.
• Editor/ naming: existing overlay containers use "Panel" (StageEditPanel, SoundEditor). AnimationTabModal is the first to use "Modal". If this is genuinely a modal dialog it is correctly named, but the deviation is worth noting for future contributors.