`PicturePreview` is a component for displaying image previews with additional metadata.

Features:

- Clean, responsive image display - File name display - Image loading indicator - Error state handling - Optimized image rendering - Support for various image formats

Usage Guidelines:

- Use for displaying image previews in galleries, file lists, or attachments - Provide both image source and file name for complete context - Consider appropriate sizing in your layout (component will adapt) - Use in conjunction with image loading or lazy loading for performance

Accessibility:

- Includes appropriate alt text based on file name - Maintains proper contrast for filename text - Supports keyboard navigation - Loading states are properly communicated to screen readers

WithError: Demonstrates how the component handles image loading errors.

This example shows how the PicturePreview component displays an error state when the image fails to load. It provides visual feedback to the user that there was a problem loading the image, while still displaying the filename information.

Gallery: Demonstrates using multiple PicturePreview components together.

This example shows how multiple PicturePreview components can be used in a grid layout to create a simple image gallery. Each preview retains its own filename display and error handling capabilities.

ControlAlwaysVisible: Shows the zoom control bar always visible.

By default, the control bar only appears on hover. Setting `control.show` to "always" makes it permanently visible.

ControlPositions: Demonstrates different control bar positions.

The control bar can be positioned in any corner of the preview:

- top-left - top-right - bottom-left - bottom-right (default)

ControlDisabled: Shows the preview without zoom controls.

Setting `control.enable` to false hides the control bar entirely, useful for read-only previews or when zoom functionality is not needed.