Okay, I'll refine the Toolbar component to ensure its elements are more responsive and adapt gracefully to various screen sizes, from mobile to laptop.

The main goal is to prevent overflow and ensure all controls remain accessible and usable on smaller viewports. We'll primarily adjust Tailwind CSS classes for better wrapping, spacing, and sizing of elements within the toolbar.

Key Responsiveness Changes in Toolbar.tsx:

1. Main Layout:

   • The main div now uses flex flex-wrap items-center gap-x-3 gap-y-2 justify-between.

     • flex-wrap: Allows items to wrap to the next line.
     • gap-x-3 gap-y-2: Provides consistent spacing between items, both horizontally and vertically when wrapped.
     • justify-between: Pushes the "Left Aligned Tools & Controls" and "Right Aligned Actions" to opposite ends when there's enough space. On smaller screens, they will stack due to flex-wrap.

2. Tool Selection Group (Left Aligned Tools & Controls):

   • This group also uses flex flex-wrap items-center gap-x-3 gap-y-2.
   • The individual tool dropdowns and utility tool buttons are in a nested flex items-center gap-1.
   • Separators (md:block, lg:block) are used to visually divide sections, and they hide on smaller screens to save space.

3. Control Sections (Color, Opacity, Size, Font Family):

   • Each control group (e.g., Opacity slider, Size slider) now has a min-w-[value] to ensure they have a minimum width but can shrink or grow.
   • Labels and value displays use text-xs sm:text-sm for smaller font sizes on mobile.
   • Buttons for increment/decrement size use h-7 w-7 sm:h-8 sm:w-8 and smaller icons.
   • The Font Family dropdown trigger has max-w-[100px] sm:max-w-[120px] for its text span to prevent overly long font names from breaking the layout, with truncate.

4. Right Aligned Actions (Undo, Redo, Clear, Save):

   • This group uses flex items-center gap-1 sm:gap-2.
   • Clear and Save buttons show text only on sm screens and larger, relying on icons for smaller views. Icon and text sizes are also adjusted (h-4 w-4 sm:h-5 sm:w-5, text-xs sm:text-sm).

5. General:

   • Reduced padding on some icon buttons (p-2).
   • Adjusted chevron icon margin in dropdown triggers (ml-0.5).

Responsiveness in PaintingApp.tsx:

• The main container height h-[calc(100vh-4rem)] sm:h-[calc(100vh-5rem)] adjusts based on viewport height, leaving space for a potential top bar/header.
• The text input overlay input field has w-40 sm:w-auto to be narrower on small screens.

These changes should make the toolbar much more adaptable to different screen sizes, ensuring a good user experience on both mobile and desktop.

Okay, I'll enhance the text tool with the formatting options shown in your reference image: Font Family, Font Size, Bold, Italic, Underline, Strikethrough, Text Alignment (Left, Center, Right), and an option for Opaque/Transparent Background for the text. These new controls will be integrated into the toolbar and will be responsive.

Here's the updated code:

Key Changes:

1. PaintingApp.tsx:

   • Added new state variables for text formatting: isBold, isItalic, isUnderline, isStrikethrough, textAlign, textOpaqueBackground.
   • These states are passed to both Toolbar (for control) and PaintingCanvas (for rendering via textConfig).
   • handleTextSubmit now constructs a TextConfig object with all these new properties.

2. Toolbar.tsx:

   • New Text Formatting Section: A new div is added that is only visible when currentTool === 'text'. This section contains all the new text controls.

     • Font Family & Size: These existing controls are moved into this dedicated text formatting section.
     • Style Toggles: Toggle components from shadcn/ui are used for Bold, Italic, Underline, and Strikethrough. Lucide icons (Bold, Italic, Underline, Strikethrough) are used.
     • Text Alignment: A ToggleGroup is used for Left, Center, and Right alignment, with Lucide icons (AlignLeft, AlignCenter, AlignRight).
     • Opaque Background: A Checkbox component from shadcn/ui is used for the "Opaque Background" option.

   • Responsiveness:

     • The toolbar is now structured with a top row for general tools/actions and a conditional bottom row for text-specific formatting.
     • Both rows use flex-wrap and gap for better stacking on small screens.
     • The text formatting controls are also wrapped in a flex-wrap container.
     • The "Size" control for brushes/erasers is now conditionally rendered (currentTool !== 'text') to avoid confusion with the font size control in the text formatting section.

3. PaintingCanvas.tsx:

   • TextAlign type: Added export type TextAlign = "left" | "center" | "right";.
   • TextConfig Interface: Expanded to include isBold, isItalic, isUnderline, isStrikethrough, textAlign, and backgroundColor.
   • PaintingCanvasProps: Now receives a textConfig object (excluding text, x, y which are determined at click time) instead of individual text props.

   • drawText Method:

     • Font String: Constructs the ctx.font string dynamically: \$config.isBold ? "bold " : ""$config.isItalic ? "italic " : ""$config.fontSizepx $config.fontFamily``.
     • Text Alignment: Sets ctx.textAlign = config.textAlign. The actualX for fillText is adjusted based on this. For background and underline/strikethrough, the starting X position (bgX or lineXStart) is calculated based on alignment and text width.
     • Background: If config.backgroundColor !== "transparent", it draws a filled rectangle behind the text. Padding is added around the text for the background.
     • Underline & Strikethrough: If enabled, it measures the text and draws a line using ctx.stroke(). Line thickness is relative to font size. The Y position for these lines is calculated based on text metrics.
     • Uses textMetrics.actualBoundingBoxAscent and textMetrics.actualBoundingBoxDescent for more accurate height and line positioning. Fallbacks are provided if these metrics aren't available.
   • applyStylesForNonText: A new helper to separate styling logic for brushes/shapes from text styling, which is now mostly handled within drawText.
   • Canvas Initialization & Resize: Ensured that the canvas is initialized with a white background and this state is saved to history, especially important for the first load or if history is empty.

This comprehensive update adds a rich set of text formatting tools, making the text feature much more powerful and aligned with standard paint applications. The toolbar is also more organized and responsive.