Aurora AI Image

1"use client"
2 
3import * as React from "react"
4import { CircleAlert, Maximize2, RotateCw, Sparkles } from "lucide-react"
5import { Button } from "@/registry/aurora/ui/button"
6import { Spinner } from "@/registry/aurora/ui/spinner"
7 
8// AiImage — an AI-generated image surface with ready / generating / failed
9// states, an "AI" identity badge, model pill, prompt overlay, metadata footer
10// (caption / dimensions / seed) and expand + regenerate / retry affordances.
11//
12// Visual spec ported from the Claude Design source. Axon orange is the
13// AI/automation identity accent; cyan remains the primary UI accent; status
14// colors come from the semantic token layer.
15 
16// ---------------------------------------------------------------------------
17// Types
18// ---------------------------------------------------------------------------
19 
20export type AiImageStatus = "ready" | "generating" | "failed"
21 
22/** Common aspect ratios — also accepts any "W:H" string. */
23export type AiImageAspect = "1:1" | "4:3" | "3:2" | "16:9" | "3:4" | (string & {})
24 
25export interface AuroraImageProps
26  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
27  /** Image source. When omitted (or `loading`/`status` is non-ready) the surface shows a state placeholder. */
28  src?: string
29  /** Alt text for the rendered image. */
30  alt?: string
31  /** State of the surface. Defaults to "ready"; `loading` forces "generating". */
32  status?: AiImageStatus
33  /** Convenience flag — same as `status="generating"`. */
34  loading?: boolean
35  /** Aspect ratio of the image frame (e.g. "4:3"). Defaults to "4:3". */
36  aspect?: AiImageAspect
37  /** Generation progress 0–1 — drives the bottom progress bar + percent label while generating. */
38  progress?: number
39  /** Model label shown in the top-right pill (e.g. "Imagen 3"). */
40  model?: string
41  /** Prompt text overlaid along the bottom of a ready image. */
42  prompt?: string
43  /** Caption shown in the footer below the frame. */
44  caption?: string
45  /** Pixel dimensions shown in the metadata row (e.g. "1024×768"). */
46  dimensions?: string
47  /** Seed shown in the metadata row. */
48  seed?: string
49  /** Regenerate handler — shows a "Regenerate" button in the ready footer. */
50  onRegenerate?: () => void
51  /** Expand handler — shows a hover "expand" affordance on a ready image. */
52  onExpand?: () => void
53  /** Retry handler — shows a "Retry" button in the failed state. */
54  onRetry?: () => void
55}
56 
57// … truncated