feat: enhance layout system by adding padding to Item

[MinCrohn]

This PR enhances the layout calculation by adding a padding property to the Item object, similar to the CSS box model.
All child components now calculate their size and position based on the 'content area' (excluding padding), enabling more precise and predictable layouts.

A comprehensive test suite for the Bar component has been added to verify this new logic, covering various edge cases.

[gemini-code-assist]

Summary of Changes

Hello @MinCrohn, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the layout system by introducing a padding property to the Item object, allowing child components to calculate their size and position based on the parent's content area. This change provides a more robust and predictable layout model. Additionally, a comprehensive test suite for the Bar component has been added to validate the new layout logic and ensure its correctness across various scenarios.

Highlights

• Enhanced Layout System: Implemented a padding property for Item objects, allowing child components to render within the parent's content area, similar to the CSS box model. This enables more precise and predictable layouts.
• Refactored Size and Placement Calculations: Updated core layout utilities (calcSize, getHorizontalPosition, getVerticalPosition) to account for parent padding, ensuring accurate positioning and sizing of child components relative to the content area.
• New getLayoutContext Utility: Introduced a helper function (getLayoutContext) to centralize the calculation of parent and content dimensions, simplifying layout logic and promoting reusability.
• Comprehensive Bar Component Tests: Added a new, extensive test file (Bar.test.js) to thoroughly verify the Bar component's behavior under various size, placement, margin, and padding configurations, covering numerous edge cases.
• Improved Test Reliability: Migrated patchmap.test.js to use Vitest's fake timers, making tests more deterministic and potentially faster by controlling asynchronous operations.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This PR enhances the layout system by adding padding to the Item object, similar to the CSS box model. The changes include modifications to data schemas, mixins, and the addition of a new test file. The review identified a critical issue in Itemsizeable.js and several medium-severity suggestions in utils.js, Bar.test.js, and convert.js.

[MinCrohn]

/gemini review

[gemini-code-assist]

Code Review

This PR enhances the layout calculation by adding a padding property to the Item object. All child components now calculate their size and position based on the 'content area' (excluding padding), enabling more precise and predictable layouts. I found one critical issue that could lead to a runtime error, which I have commented on.

[MinCrohn]

/gemini review

[gemini-code-assist]

Code Review

This is a great enhancement to the layout system. Introducing a padding property that mimics the CSS box model is a solid architectural improvement that will make layouts more intuitive and predictable. The implementation is clean, and the new getLayoutContext utility centralizes the layout logic effectively.

I'm particularly impressed with the comprehensive test suite for the Bar component; it covers a wide range of scenarios and edge cases, which significantly increases confidence in this change.

I've left a couple of comments. One is a high-severity concern about a potential unintended visual change in the legacy data conversion. The other is a medium-severity suggestion to improve the robustness of the new layout utility function. Overall, excellent work!