ImageCropper experimental

<script lang="ts">
  import * as ImageCropper from '@odbd/svelte/image-cropper'
  import { handles } from '@odbd/svelte/image-cropper'

  const src = 'https://images.unsplash.com/photo-1502082553048-f009c37129b9?w=640&q=80'
</script>

<ImageCropper.Root style="max-width: 24rem;">
  <ImageCropper.Viewport style="aspect-ratio: 4 / 3;">
    <ImageCropper.Image {src} />
    <ImageCropper.Selection>
      <ImageCropper.Grid axis="horizontal" style="top: 33.33%;" />
      <ImageCropper.Grid axis="horizontal" style="top: 66.66%;" />
      <ImageCropper.Grid axis="vertical" style="left: 33.33%;" />
      <ImageCropper.Grid axis="vertical" style="left: 66.66%;" />
      {#each handles as position}
        <ImageCropper.Handle {position} />
      {/each}
    </ImageCropper.Selection>
  </ImageCropper.Viewport>
</ImageCropper.Root>