fix(toolbar): sync layout controls with selected element's Tailwind classes

[hollermay]

• Pass selected element's class list to LayoutPosition panel
• Parse Tailwind classes (e.g., flex, items-center) from class list
• Initialize and update toolbar state based on parsed classes
• Ensures toolbar UI reflects actual layout/alignment of selected element

Description

This PR fixes an issue where the layout controls in the top toolbar did not reflect the actual Tailwind classes (such as flex and items-center) of the selected element. Now, the toolbar state is synchronized with the selected element’s class list, ensuring the UI accurately displays the current layout and alignment. This improves the reliability of applying styles from the toolbar and provides a more intuitive editing experience.

Related Issues

closes #2023

Type of Change

• [x] Bug fix
• [ ] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other (please describe):

Testing

• Selected elements with various Tailwind layout classes (e.g., flex, items-center, grid, etc.).
• Verified that the toolbar UI updates to reflect the selected element’s layout and alignment.
• Confirmed that changing the selection updates the toolbar state accordingly.
• Ensured that applying styles from the toolbar works as expected and updates the element’s classes.

Screenshots (if applicable)

Not Required

Additional Notes

• Make sure the selectedElement prop is updated with the correct class list when the selection changes.
• No breaking changes introduced.

---

[!IMPORTANT] Synchronizes toolbar layout controls with selected element's Tailwind classes by parsing and updating state in layout-position.tsx.

• Behavior:
  • Passes selectedElement's class list to LayoutPosition in index.tsx.
  • Parses Tailwind classes in LayoutPosition to determine layout type, direction, and alignment.
  • Synchronizes toolbar state with parsed classes using useEffect in layout-position.tsx.
• Functions:
  • Adds parseTailwindLayout() in layout-position.tsx to extract layout information from class list.
  • Updates state variables (layoutType, direction, verticalAlign, horizontalAlign) based on parsed classes.
• UI:
  • Ensures toolbar UI reflects the actual layout/alignment of the selected element.

^{This description was created by for 0080235921b7a9e13959e14ace1f21a505d5c379. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@hollermay is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[hollermay]

@Kitenite kindly check my PR.

[hollermay]

@mdp @justjavac