@moloodev/ui 0.0.0-stage → 0.2.0

package/src/components/ui/image-field.tsx

@@ -0,0 +1,796 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "./button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog"
+import {
+  Dropzone,
+  partitionDropzoneFiles,
+  type DropzoneRejectReason,
+} from "./dropzone"
+import { Slider } from "./slider"
+import { cn } from "../../lib/utils"
+
+export const IMAGE_FIELD_ACCEPT = "image/jpeg,image/png,image/webp"
+export const IMAGE_FIELD_MAX_BYTES = 5 * 1024 * 1024
+
+const OUTPUT_EDGE = 512
+const MAX_EDGE = 8192
+
+export type CropArea = { x: number; y: number; width: number; height: number }
+export type CropOffset = { x: number; y: number }
+
+export type ImageFieldMessages = {
+  choose: string
+  change: string
+  remove: string
+  title: string
+  description: string
+  drop: string
+  formats: string
+  zoom: string
+  pan: string
+  reset: string
+  replace: string
+  cancel: string
+  apply: string
+  retry: string
+  uploading: string
+  preparing: string
+  uploadError: string
+  typeError: string
+  sizeError: string
+  readError: string
+  countError: string
+  preview: string
+  previewApply: string
+  ready: string
+}
+
+export const imageFieldMessages: ImageFieldMessages = {
+  choose: "Choose image",
+  change: "Change image",
+  remove: "Remove",
+  title: "Adjust image",
+  description: "Zoom the image, then drag it into place.",
+  drop: "Drop an image, or click to select",
+  formats: "JPG, PNG, or WebP. Up to 5 MB.",
+  zoom: "Zoom",
+  pan: "Image. Drag it or use the arrow keys to move it. Use + and − to zoom.",
+  reset: "Reset",
+  replace: "Choose another image",
+  cancel: "Cancel",
+  apply: "Apply image",
+  retry: "Upload again",
+  uploading: "Uploading",
+  preparing: "Preparing image",
+  uploadError: "Could not upload the image. Check your connection and try again.",
+  typeError: "Choose a JPG, PNG, or WebP image.",
+  sizeError: "Choose a non-empty file up to 5 MB.",
+  readError: "Could not open that image. Choose a different file.",
+  countError: "Choose one image at a time.",
+  preview: "Preview only. This image is not saved.",
+  previewApply: "Apply preview",
+  ready: "Image is ready. Save to keep this change.",
+}
+
+export type ImageUpload = (
+  file: File,
+  options: { signal: AbortSignal; onProgress: (percentage: number) => void },
+) => Promise<string>
+
+export type ImageFieldProps = {
+  label: string
+  value: string | null
+  onChange: (value: string | null) => void
+  upload: ImageUpload
+  fallback?: React.ReactNode
+  shape?: "circle" | "square"
+  aspectRatio?: number
+  accept?: string
+  maxSize?: number
+  disabled?: boolean
+  previewOnly?: boolean
+  onBusyChange?: (busy: boolean) => void
+  messages?: Partial<ImageFieldMessages>
+  className?: string
+}
+
+const MAX_ZOOM = 4
+const FRAME_SCALE = 0.8
+
+/** Original-image pixels under the crop frame. `zoom` below 1 is 1. Positive offset pans the image right and down. */
+export function getCropRect(
+  width: number,
+  height: number,
+  zoom: number,
+  offset: CropOffset,
+  aspectRatio = 1,
+): CropArea {
+  if (!(width > 0) || !(height > 0)) return { x: 0, y: 0, width: 0, height: 0 }
+  const aspect = aspectRatio > 0 && Number.isFinite(aspectRatio) ? aspectRatio : 1
+  const scale = Math.max(1, Number.isFinite(zoom) ? zoom : 1)
+  const coverWidth = width / height > aspect ? height * aspect : width
+  const coverHeight = coverWidth / aspect
+  const cropWidth = coverWidth / scale
+  const cropHeight = coverHeight / scale
+  const panX = Number.isFinite(offset.x) ? offset.x : 0
+  const panY = Number.isFinite(offset.y) ? offset.y : 0
+  return {
+    x: Math.min(width - cropWidth, Math.max(0, (width - cropWidth) / 2 - panX)),
+    y: Math.min(height - cropHeight, Math.max(0, (height - cropHeight) / 2 - panY)),
+    width: cropWidth,
+    height: cropHeight,
+  }
+}
+
+function panFromRect(rect: CropArea, width: number, height: number): CropOffset {
+  return {
+    x: (width - rect.width) / 2 - rect.x,
+    y: (height - rect.height) / 2 - rect.y,
+  }
+}
+
+function rejectionText(reason: DropzoneRejectReason, messages: ImageFieldMessages) {
+  if (reason === "type") return messages.typeError
+  if (reason === "size") return messages.sizeError
+  return messages.countError
+}
+
+async function cropImage(source: string, crop: CropArea): Promise<File> {
+  const image = new Image()
+  image.src = source
+  await image.decode()
+  const width = Math.round(crop.width)
+  const height = Math.round(crop.height)
+  const fit = Math.min(1, OUTPUT_EDGE / Math.max(width, height))
+  const canvas = document.createElement("canvas")
+  canvas.width = Math.max(1, Math.round(width * fit))
+  canvas.height = Math.max(1, Math.round(height * fit))
+  const context = canvas.getContext("2d")
+  if (!context || width < 1 || height < 1) throw new Error("invalid_image")
+  context.drawImage(
+    image,
+    crop.x,
+    crop.y,
+    crop.width,
+    crop.height,
+    0,
+    0,
+    canvas.width,
+    canvas.height,
+  )
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (value) => (value ? resolve(value) : reject(new Error("encode_failed"))),
+      "image/webp",
+      0.9,
+    )
+  })
+  if (blob.type !== "image/webp") throw new Error("unsupported_encoding")
+  return new File([blob], "image.webp", { type: blob.type })
+}
+
+function ImageField({
+  label,
+  value,
+  onChange,
+  upload,
+  fallback = null,
+  shape = "square",
+  aspectRatio = 1,
+  accept = IMAGE_FIELD_ACCEPT,
+  maxSize = IMAGE_FIELD_MAX_BYTES,
+  disabled,
+  previewOnly,
+  onBusyChange,
+  messages,
+  className,
+}: ImageFieldProps) {
+  const copy = { ...imageFieldMessages, ...messages }
+  const [open, setOpen] = React.useState(false)
+  const [local, setLocal] = React.useState<string | null | undefined>(undefined)
+  const localUrl = React.useRef<string | null>(null)
+  const [ready, setReady] = React.useState(false)
+  const [failedSrc, setFailedSrc] = React.useState<string | null>(null)
+  const labelId = React.useId()
+  const shown = local === undefined ? value : local
+  const failed = Boolean(shown) && failedSrc === shown
+
+  function showLocal(url: string | null) {
+    if (localUrl.current) URL.revokeObjectURL(localUrl.current)
+    localUrl.current = url
+    setLocal(url)
+  }
+
+  React.useEffect(() => {
+    return () => {
+      if (localUrl.current) URL.revokeObjectURL(localUrl.current)
+    }
+  }, [])
+
+  return (
+    <div
+      data-slot="image-field"
+      role="group"
+      aria-labelledby={labelId}
+      className={cn("flex flex-col gap-3", className)}
+    >
+      <p id={labelId} className="text-sm font-semibold">
+        {label}
+      </p>
+      <div className="flex flex-wrap items-center gap-4">
+        <div
+          data-slot="image-field-preview"
+          className={cn(
+            "flex size-16 shrink-0 items-center justify-center overflow-hidden bg-muted",
+            shape === "circle" ? "rounded-full" : "rounded-md",
+          )}
+        >
+          {shown && !failed ? (
+            <img
+              src={shown}
+              alt={label}
+              className="size-full object-cover"
+              onError={() => setFailedSrc(shown)}
+            />
+          ) : (
+            fallback
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={disabled}
+              onClick={() => setOpen(true)}
+            >
+              {shown ? copy.change : copy.choose}
+            </Button>
+            {shown ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                disabled={disabled}
+                onClick={() => {
+                  if (previewOnly) showLocal(null)
+                  else {
+                    setLocal(undefined)
+                    onChange(null)
+                  }
+                  setReady(true)
+                }}
+              >
+                {copy.remove}
+              </Button>
+            ) : null}
+          </div>
+          <p className="text-sm text-muted-foreground">{copy.formats}</p>
+        </div>
+      </div>
+      {ready ? (
+        <p role="status" className="text-sm text-muted-foreground">
+          {previewOnly ? copy.preview : copy.ready}
+        </p>
+      ) : null}
+      <Dialog open={open} onOpenChange={setOpen}>
+        {open ? (
+          <ImageDialog
+            shape={shape}
+            aspectRatio={aspectRatio}
+            accept={accept}
+            maxSize={maxSize}
+            copy={copy}
+            upload={upload}
+            previewOnly={previewOnly}
+            onBusyChange={onBusyChange}
+            onOpenChange={setOpen}
+            onApply={(url, isLocal) => {
+              if (isLocal) showLocal(url)
+              else onChange(url)
+              setReady(true)
+            }}
+          />
+        ) : null}
+      </Dialog>
+    </div>
+  )
+}
+
+function ImageDialog({
+  onOpenChange,
+  shape,
+  aspectRatio,
+  accept,
+  maxSize,
+  copy,
+  upload,
+  previewOnly,
+  onApply,
+  onBusyChange,
+}: {
+  onOpenChange: (open: boolean) => void
+  shape: "circle" | "square"
+  aspectRatio: number
+  accept: string
+  maxSize: number
+  copy: ImageFieldMessages
+  upload: ImageUpload
+  previewOnly?: boolean
+  onApply: (url: string, local: boolean) => void
+  onBusyChange?: (busy: boolean) => void
+}) {
+  const [source, setSource] = React.useState<string | null>(null)
+  const sourceUrl = React.useRef<string | null>(null)
+  const [filename, setFilename] = React.useState("")
+  const [zoom, setZoom] = React.useState(1)
+  const [offset, setOffset] = React.useState<CropOffset>({ x: 0, y: 0 })
+  const [area, setArea] = React.useState<CropArea | null>(null)
+  const [state, setState] = React.useState<"idle" | "reading" | "preparing" | "uploading">("idle")
+  const [error, setError] = React.useState("")
+  const [retry, setRetry] = React.useState(false)
+  const [progress, setProgress] = React.useState(0)
+  const controller = React.useRef<AbortController | null>(null)
+  const generation = React.useRef(0)
+  const picker = React.useRef<HTMLInputElement>(null)
+  const zoomId = React.useId()
+  const busy = state !== "idle"
+
+  React.useEffect(() => {
+    onBusyChange?.(busy)
+    return () => onBusyChange?.(false)
+  }, [busy, onBusyChange])
+  React.useEffect(() => {
+    return () => {
+      generation.current += 1
+      controller.current?.abort()
+      if (sourceUrl.current) URL.revokeObjectURL(sourceUrl.current)
+    }
+  }, [])
+
+  function reject(reason: DropzoneRejectReason) {
+    setError(rejectionText(reason, copy))
+  }
+
+  async function select(files: File[]) {
+    const file = files[0]
+    if (!file) return
+    const version = ++generation.current
+    const url = URL.createObjectURL(file)
+    setState("reading")
+    setError("")
+    setRetry(false)
+    try {
+      const image = new Image()
+      image.src = url
+      await image.decode()
+      if (image.naturalWidth > MAX_EDGE || image.naturalHeight > MAX_EDGE) {
+        throw new Error("image_too_large")
+      }
+      if (version !== generation.current) {
+        URL.revokeObjectURL(url)
+        return
+      }
+      if (sourceUrl.current) URL.revokeObjectURL(sourceUrl.current)
+      sourceUrl.current = url
+      setSource(url)
+      setFilename(file.name)
+      setZoom(1)
+      setOffset({ x: 0, y: 0 })
+      setArea(null)
+    } catch {
+      URL.revokeObjectURL(url)
+      if (version === generation.current) setError(copy.readError)
+    } finally {
+      if (version === generation.current) setState("idle")
+    }
+  }
+
+  function take(files: File[]) {
+    const result = partitionDropzoneFiles(files, { accept, multiple: false, maxSize })
+    const reason = result.rejected[0]?.reason
+    if (reason) reject(reason)
+    void select(result.accepted)
+  }
+
+  async function apply() {
+    if (!source || !area || busy) return
+    const version = ++generation.current
+    const abort = new AbortController()
+    controller.current = abort
+    setState("preparing")
+    setError("")
+    setProgress(0)
+    try {
+      const file = await cropImage(source, area)
+      if (version !== generation.current) return
+      let url: string
+      if (previewOnly) url = URL.createObjectURL(file)
+      else {
+        setState("uploading")
+        url = await upload(file, {
+          signal: abort.signal,
+          onProgress: (value) => {
+            if (version === generation.current) setProgress(Math.min(100, Math.max(0, value)))
+          },
+        })
+      }
+      if (version !== generation.current) {
+        if (previewOnly) URL.revokeObjectURL(url)
+        return
+      }
+      onApply(url, Boolean(previewOnly))
+      onOpenChange(false)
+    } catch {
+      if (version === generation.current) {
+        setError(copy.uploadError)
+        setRetry(true)
+      }
+    } finally {
+      if (version === generation.current) setState("idle")
+    }
+  }
+
+  function close() {
+    generation.current += 1
+    controller.current?.abort()
+    onOpenChange(false)
+  }
+
+  return (
+    <DialogContent
+      showCloseButton={false}
+      className="max-h-[calc(100dvh-2rem)] overflow-y-auto sm:max-w-md"
+    >
+      <DialogHeader>
+        <DialogTitle>{copy.title}</DialogTitle>
+        <DialogDescription>{copy.description}</DialogDescription>
+      </DialogHeader>
+      {source ? (
+        <>
+          <CropStage
+            key={source}
+            source={source}
+            zoom={zoom}
+            offset={offset}
+            aspectRatio={aspectRatio}
+            onZoomChange={setZoom}
+            onOffsetChange={setOffset}
+            onAreaChange={setArea}
+            shape={shape}
+            disabled={busy}
+            label={copy.pan}
+          />
+          <div className="flex items-center justify-between gap-3">
+            <p className="min-w-0 truncate text-sm text-muted-foreground">{filename}</p>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              disabled={busy}
+              onClick={() => picker.current?.click()}
+            >
+              {copy.replace}
+            </Button>
+          </div>
+          <div className="flex items-center gap-3">
+            <span id={zoomId} className="text-sm font-semibold">
+              {copy.zoom}
+            </span>
+            <Slider
+              className="min-w-0 flex-1"
+              aria-labelledby={zoomId}
+              min={100}
+              max={MAX_ZOOM * 100}
+              step={1}
+              value={[Math.round(zoom * 100)]}
+              disabled={busy}
+              format={{ style: "unit", unit: "percent", maximumFractionDigits: 0 }}
+              onValueChange={(next) => {
+                const value = typeof next === "number" ? next : next[0]
+                if (value !== undefined) setZoom(value / 100)
+              }}
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              disabled={busy}
+              onClick={() => {
+                setZoom(1)
+                setOffset({ x: 0, y: 0 })
+              }}
+            >
+              {copy.reset}
+            </Button>
+          </div>
+        </>
+      ) : (
+        <Dropzone
+          accept={accept}
+          maxSize={maxSize}
+          disabled={busy}
+          label={copy.drop}
+          description={copy.formats}
+          aria-invalid={error ? true : undefined}
+          onReject={(rejections) => {
+            const reason = rejections[0]?.reason
+            if (reason) reject(reason)
+          }}
+          onFiles={(files) => void select(files)}
+        />
+      )}
+      <input
+        ref={picker}
+        type="file"
+        accept={accept}
+        className="hidden"
+        tabIndex={-1}
+        onChange={(event) => {
+          take(Array.from(event.target.files ?? []))
+          event.target.value = ""
+        }}
+      />
+      {previewOnly ? <p className="text-sm text-muted-foreground">{copy.preview}</p> : null}
+      {busy ? (
+        <div className="flex flex-col gap-2" role="status" aria-live="polite">
+          <div className="flex justify-between text-sm">
+            <span>{state === "uploading" ? copy.uploading : copy.preparing}</span>
+            {state === "uploading" ? (
+              <span className="tabular-nums">{Math.round(progress)}%</span>
+            ) : null}
+          </div>
+          {state === "uploading" ? (
+            <progress
+              className="h-1.5 w-full accent-primary"
+              aria-label={copy.uploading}
+              value={progress}
+              max={100}
+            />
+          ) : null}
+        </div>
+      ) : null}
+      {error ? (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      ) : null}
+      <DialogFooter>
+        <Button type="button" variant="outline" onClick={close}>
+          {copy.cancel}
+        </Button>
+        <Button type="button" disabled={!area || busy} onClick={() => void apply()}>
+          {previewOnly ? copy.previewApply : retry ? copy.retry : copy.apply}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  )
+}
+
+function CropStage({
+  source,
+  zoom,
+  offset,
+  aspectRatio,
+  onZoomChange,
+  onOffsetChange,
+  onAreaChange,
+  shape,
+  disabled,
+  label,
+}: {
+  source: string
+  zoom: number
+  offset: CropOffset
+  aspectRatio: number
+  onZoomChange: (zoom: number) => void
+  onOffsetChange: (offset: CropOffset) => void
+  onAreaChange: (area: CropArea) => void
+  shape: "circle" | "square"
+  disabled: boolean
+  label: string
+}) {
+  const stage = React.useRef<HTMLDivElement>(null)
+  const drag = React.useRef<{ id: number; x: number; y: number; offset: CropOffset } | null>(null)
+  const view = React.useRef({ zoom, offset })
+  const metrics = React.useRef({ width: 0, height: 0, aspect: 1 })
+  const [box, setBox] = React.useState({ width: 0, height: 0 })
+  const [natural, setNatural] = React.useState({ width: 0, height: 0 })
+  const aspect = aspectRatio > 0 && Number.isFinite(aspectRatio) ? aspectRatio : 1
+  const zoomUsed = Math.min(MAX_ZOOM, Math.max(1, Number.isFinite(zoom) ? zoom : 1))
+  const rect = getCropRect(natural.width, natural.height, zoomUsed, offset, aspect)
+  const side = Math.min(box.width, box.height) * FRAME_SCALE
+  const frame =
+    side > 0
+      ? aspect >= 1
+        ? { width: side, height: side / aspect }
+        : { width: side * aspect, height: side }
+      : { width: 0, height: 0 }
+  const scale = rect.width > 0 && frame.width > 0 ? frame.width / rect.width : 0
+  const offsetX = offset.x
+  const offsetY = offset.y
+  const cropX = rect.x
+  const cropY = rect.y
+  const cropWidth = rect.width
+  const cropHeight = rect.height
+
+  React.useEffect(() => {
+    view.current = { zoom: zoomUsed, offset: { x: offsetX, y: offsetY } }
+    metrics.current = { width: natural.width, height: natural.height, aspect }
+  }, [zoomUsed, offsetX, offsetY, natural.width, natural.height, aspect])
+
+  React.useEffect(() => {
+    const element = stage.current
+    if (!element) return
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setBox({ width: entry.contentRect.width, height: entry.contentRect.height })
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+
+  React.useEffect(() => {
+    if (cropWidth <= 0) return
+    const nextRect = { x: cropX, y: cropY, width: cropWidth, height: cropHeight }
+    onAreaChange(nextRect)
+    const next = panFromRect(nextRect, natural.width, natural.height)
+    if (Math.abs(next.x - offsetX) > 1e-4 || Math.abs(next.y - offsetY) > 1e-4) onOffsetChange(next)
+  }, [cropX, cropY, cropWidth, cropHeight, natural.width, natural.height, offsetX, offsetY, onAreaChange, onOffsetChange])
+
+  React.useEffect(() => {
+    const element = stage.current
+    if (!element || disabled) return
+    const page = element.clientHeight
+    function onWheel(event: WheelEvent) {
+      const size = metrics.current
+      if (size.width <= 0 || size.height <= 0) return
+      event.preventDefault()
+      const line = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? page : 1
+      const current = view.current
+      const nextZoom = Math.min(MAX_ZOOM, Math.max(1, current.zoom * Math.exp(-event.deltaY * line * 0.002)))
+      const next = getCropRect(size.width, size.height, nextZoom, current.offset, size.aspect)
+      const nextOffset = panFromRect(next, size.width, size.height)
+      view.current = { zoom: nextZoom, offset: nextOffset }
+      if (nextZoom !== current.zoom) onZoomChange(nextZoom)
+      if (nextOffset.x !== current.offset.x || nextOffset.y !== current.offset.y) onOffsetChange(nextOffset)
+    }
+    element.addEventListener("wheel", onWheel, { passive: false })
+    return () => element.removeEventListener("wheel", onWheel)
+  }, [disabled, onZoomChange, onOffsetChange])
+
+  function publish(nextZoom: number, nextOffset: CropOffset) {
+    const size = metrics.current
+    if (size.width <= 0 || size.height <= 0) return
+    const zoomNext = Math.min(MAX_ZOOM, Math.max(1, nextZoom))
+    const next = getCropRect(size.width, size.height, zoomNext, nextOffset, size.aspect)
+    const clamped = panFromRect(next, size.width, size.height)
+    const current = view.current
+    view.current = { zoom: zoomNext, offset: clamped }
+    if (zoomNext !== current.zoom) onZoomChange(zoomNext)
+    if (clamped.x !== current.offset.x || clamped.y !== current.offset.y) onOffsetChange(clamped)
+  }
+
+  return (
+    <div
+      ref={stage}
+      role="group"
+      tabIndex={disabled ? -1 : 0}
+      aria-label={label}
+      aria-disabled={disabled || undefined}
+      aria-busy={disabled}
+      data-slot="image-field-crop"
+      className={cn(
+        "relative aspect-square max-h-[45dvh] touch-none overflow-hidden rounded-md bg-muted outline-none select-none moloo-focus",
+        disabled ? "pointer-events-none" : "cursor-grab active:cursor-grabbing",
+      )}
+      onPointerDown={(event) => {
+        if (disabled || event.button !== 0 || scale <= 0) return
+        event.preventDefault()
+        event.currentTarget.focus()
+        event.currentTarget.setPointerCapture(event.pointerId)
+        drag.current = { id: event.pointerId, x: event.clientX, y: event.clientY, offset: view.current.offset }
+      }}
+      onPointerMove={(event) => {
+        const start = drag.current
+        if (!start || start.id !== event.pointerId || disabled || scale <= 0) return
+        publish(view.current.zoom, {
+          x: start.offset.x + (event.clientX - start.x) / scale,
+          y: start.offset.y + (event.clientY - start.y) / scale,
+        })
+      }}
+      onPointerUp={() => {
+        drag.current = null
+      }}
+      onPointerCancel={() => {
+        drag.current = null
+      }}
+      onLostPointerCapture={() => {
+        drag.current = null
+      }}
+      onKeyDown={(event) => {
+        if (disabled || rect.width <= 0) return
+        const current = view.current
+        if (event.key === "+" || event.key === "=" || event.key === "-" || event.key === "_") {
+          event.preventDefault()
+          const zoomNext = event.key === "-" || event.key === "_" ? current.zoom / 1.1 : current.zoom * 1.1
+          publish(zoomNext, current.offset)
+          return
+        }
+        const delta = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[event.key]
+        if (!delta) return
+        event.preventDefault()
+        const step = (event.shiftKey ? 0.1 : 0.02) * Math.min(rect.width, rect.height)
+        publish(current.zoom, {
+          x: current.offset.x + delta[0] * step,
+          y: current.offset.y + delta[1] * step,
+        })
+      }}
+    >
+      <img
+        src={source}
+        alt=""
+        draggable={false}
+        className={cn("pointer-events-none absolute max-w-none select-none", scale === 0 && "invisible")}
+        style={
+          scale > 0
+            ? {
+                left: (box.width - frame.width) / 2 - rect.x * scale,
+                top: (box.height - frame.height) / 2 - rect.y * scale,
+                width: natural.width * scale,
+                height: natural.height * scale,
+              }
+            : undefined
+        }
+        onLoad={(event) => {
+          const width = event.currentTarget.naturalWidth
+          const height = event.currentTarget.naturalHeight
+          metrics.current = { ...metrics.current, width, height }
+          setNatural({ width, height })
+        }}
+      />
+      {scale > 0 ? (
+        <div
+          aria-hidden
+          data-slot="image-field-frame"
+          className={cn(
+            "pointer-events-none absolute border-2 border-white shadow-[0_0_0_100vmax_rgb(from_var(--foreground)_r_g_b_/_28%)] dark:shadow-[0_0_0_100vmax_rgb(from_var(--background)_r_g_b_/_40%)]",
+            shape === "circle" && "rounded-full",
+          )}
+          style={{
+            left: (box.width - frame.width) / 2,
+            top: (box.height - frame.height) / 2,
+            width: frame.width,
+            height: frame.height,
+          }}
+        >
+          <div
+            className={cn(
+              "absolute inset-0 grid grid-cols-3 grid-rows-3",
+              shape === "circle" && "overflow-hidden rounded-full",
+            )}
+          >
+            {Array.from({ length: 9 }, (_, index) => (
+              <span
+                key={index}
+                className={cn(index % 3 !== 2 && "border-r border-white/70", index < 6 && "border-b border-white/70")}
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export { ImageField }