feat: improve React Basic Catalog layout and update samples

[jacobsimionato]

Description of Changes

This PR improves the visual quality and layout consistency of the React Basic Catalog renderer and updates several A2UI samples.

Renderer Changes (Basic Catalog)

• Gap-based Spacing: Transitioned from a margin-based model to a gap-based model (gap: 12px) in Row and Column components.
• Typography Reset: Implemented a reset for h1-h5 margins in Text.tsx to prevent inconsistent vertical spacing caused by browser defaults.
• Improved Captions: Refined the caption variant with uppercase styling, better letter spacing, and reduced font size for better hierarchy.
• Aesthetic Refinement: Updated Card shadows and STANDARD_BORDER for a more modern, professional look.

Sample Improvements

• Weather Current: Re-architected the layout to use vertical groupings for High/Low temperatures, unified font sizes, and centered alignment.
• Email Compose: Updated labels to use the caption variant and ensured the main column stretches to fill the viewport.
• Task Card: Improved label formatting and fixed a date string format issue that caused browser console warnings.
• Login Form: Centered the footer elements vertically and updated the sign-up link to use a borderless button variant.

Rationale

The previous margin-based approach led to 'doubled' spacing between adjacent components. Moving to a centralized gap model on containers and resetting child margins ensures clean alignment and consistent whitespace. The typography and aesthetic refinements bring the Basic Catalog output closer to a production-ready design system.

Testing/Running Instructions

1. Run the React Gallery App to see the updated samples:

   cd renderers/react/a2ui_explorer
   npm install && npm run dev

2. (Optional) Use the new snapshot tool (if installed) to verify layouts:

   cd renderers/react/react_snapshot
   node dist/cli.js --sample "basic/04_weather-current" --width 400

[gemini-code-assist]

Code Review

This pull request introduces significant updates to the UI styling and layout system, including the adoption of a 'gap' based layout for Rows and Columns, updated design tokens for borders and radii, and refined typography styles. While these changes improve the visual consistency, several issues were identified: the headerReset object in Text.tsx should be moved outside the component to avoid unnecessary re-creations on render, hardcoded style values in utils.ts should be extracted into constants for better maintainability, and several JSON example files contain formatting regressions where closing braces are incorrectly placed on the same line as properties.

[gemini-code-assist]

The headerReset object is defined inside the component function, which means it is recreated on every render. Since this object is static and does not depend on any props or state, it should be moved outside the component definition to improve performance and follow React best practices.

[gemini-code-assist]

The boxShadow and backgroundColor values are hardcoded in getBaseContainerStyle. To maintain consistency with other design tokens in this file (like STANDARD_BORDER and STANDARD_RADIUS) and to facilitate easier theming or global updates in the future, these should be extracted into named constants at the top of the file.

[gemini-code-assist]

The closing brace for the object is placed on the same line as the last property. This deviates from the standard JSON formatting used throughout the repository and reduces readability. This pattern appears in several other places in this PR (e.g., lines 65, 87). Please ensure the JSON is properly formatted, ideally by using an auto-formatter as suggested in the style guide.

            "align": "center"
          },

References

1. Code should follow the relevant style guides, and use the correct auto-formatter, for each language. ^(link)