{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"A text-to-image generation console — prompt and settings up top, a full-width 2x2 batch resolving from low-res mosaic to sharp below.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n AlertCircle,\n Check,\n Download,\n Image as ImageIcon,\n Shuffle,\n Sparkles,\n} from \"lucide-react\";\nimport {\n AnimatePresence,\n motion,\n type Transition,\n useReducedMotion,\n} from \"motion/react\";\nimport { useId, useState } from \"react\";\nimport type { AIState } from \"../ai-core\";\nimport AILoader from \"../ai-loader\";\nimport AIPromptInput from \"../ai-prompt-input\";\n\n/* -------------------------------------------------------------------------- */\n/* Motion + layout constants */\n/* -------------------------------------------------------------------------- */\n\nconst SPRING_DEFAULT: Transition = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\",\n};\nconst SPRING_SNAPPY: Transition = { bounce: 0, duration: 0.2, type: \"spring\" };\n\nconst PERCENT = 100;\nconst DEFAULT_COUNT = 4;\nconst DEFAULT_ASPECT_RATIO = \"1 / 1\";\n\n/** How far apart, in overall progress, two neighbouring tiles finish. */\nconst TILE_FINISH_STAGGER = 0.09;\nconst MIN_TILE_SPAN = 0.25;\nconst TILE_ENTER_STAGGER_SECONDS = 0.05;\n\n/** The blurred pass never exceeds ~20px — past that `blur()` gets expensive. */\nconst MAX_SHARP_BLUR_PX = 18;\nconst MOSAIC_BLUR_PX = 2;\nconst MOSAIC_SATURATE = 1.35;\nconst MOSAIC_SCALE = 1.08;\nconst MOSAIC_FADE_START = 0.3;\nconst MOSAIC_FADE_SPAN = 0.5;\nconst SHARP_FADE_START = 0.12;\nconst SHARP_FADE_SPAN = 0.5;\nconst SHARPEN_EXPONENT = 1.35;\n/** Extra scale on the sharp pass at 0% — the tile \"pulls focus\" as it resolves. */\nconst FOCUS_PULL_SCALE = 0.055;\n\n/**\n * The sweep band is 45% of the tile tall and travels leading-edge-first from\n * the top edge to the bottom. Starting at -100% parks the whole band (and its\n * trail) above the tile; 124% carries the leading edge past the bottom edge.\n */\nconst SCAN_DURATION_SECONDS = 1.9;\nconst SCAN_KEYFRAMES = [\"translateY(-100%)\", \"translateY(124%)\"];\nconst SHIMMER_DURATION_SECONDS = 1.6;\nconst CARET_DURATION_SECONDS = 1;\nconst CARET_TIMES = [0, 0.5, 0.5, 1];\nconst CARET_KEYFRAMES = [1, 1, 0, 0];\n\nconst PROMPT_PLACEHOLDER = \"A lighthouse at dusk, long exposure…\";\n\nconst ACTION_ICON_SIZE = 15;\nconst STATUS_ICON_SIZE = 14;\nconst PLACEHOLDER_ICON_SIZE = 18;\n\nconst clamp01 = (value: number): number => Math.min(1, Math.max(0, value));\n\n/**\n * Where a single tile sits in its own 0→1 resolve, given the batch progress.\n *\n * Real generators don't finish four images on the same frame, and a grid that\n * does reads as a single image cut into quarters. Offsetting each tile's window\n * makes the batch look like four jobs racing rather than one mask lifting.\n */\nconst tileProgress = (\n batchProgress: number,\n index: number,\n count: number\n): number => {\n const offset = index * TILE_FINISH_STAGGER;\n const span = Math.max(MIN_TILE_SPAN, 1 - (count - 1) * TILE_FINISH_STAGGER);\n return clamp01((batchProgress - offset) / span);\n};\n\nconst ramp = (value: number, start: number, span: number): number =>\n clamp01((value - start) / span);\n\n/* -------------------------------------------------------------------------- */\n/* Public types */\n/* -------------------------------------------------------------------------- */\n\nexport type ImageGenerationStatus =\n | \"idle\"\n | \"queued\"\n | \"generating\"\n | \"done\"\n | \"error\";\n\nexport type ImageGenerationImage = {\n alt: string;\n id: string;\n /**\n * A tiny (16–48px) version of `src`. Rendered pixelated and blurred as the\n * first pass, so the tile starts as a colour mosaic of the real result\n * instead of a grey box. Falls back to `src` when omitted.\n */\n preview?: string;\n /** Surfaced once the tile has resolved. */\n seed?: string;\n src: string;\n};\n\nexport type ImageGenerationPreset = {\n id: string;\n label: string;\n};\n\nexport type ImageGenerationAspectRatio = {\n id: string;\n label: string;\n /** Any CSS `aspect-ratio` value, e.g. `\"16 / 9\"`. */\n value: string;\n};\n\n/**\n * How much surrounding chrome the panel renders. `minimal` drops the header,\n * the footer and the batch progress rail, and hides the seed readout — leaving\n * the composer and the tiles. Everything else, including the API, is unchanged.\n */\nexport type ImageGenerationChrome = \"full\" | \"minimal\";\n\n/** Whether the prompt composer sits above or below the tiles. */\nexport type ImageGenerationComposerPlacement = \"top\" | \"bottom\";\n\nexport type ImageGenerationPanelProps = {\n /** Controlled `aspect-ratio` value. Omit to let the panel own the choice. */\n aspectRatio?: string;\n aspectRatios?: ImageGenerationAspectRatio[];\n /** How much surrounding chrome renders. Defaults to `\"full\"`. */\n chrome?: ImageGenerationChrome;\n className?: string;\n /** Where the composer sits relative to the tiles. Defaults to `\"top\"`. */\n composerPlacement?: ImageGenerationComposerPlacement;\n /** Number of tiles in the grid. */\n count?: number;\n error?: string;\n images?: ImageGenerationImage[];\n /** Model name shown in the header. */\n model?: string;\n onAspectRatioChange?: (value: string) => void;\n /**\n * Cancels the run in flight. Given one, the composer's send control turns\n * into a stop button while the batch renders; without one the composer simply\n * locks until the batch settles.\n */\n onCancel?: () => void;\n onGenerate?: (prompt: string) => unknown;\n onPromptChange?: (value: string) => void;\n onRetry?: () => void;\n onSelect?: (image: ImageGenerationImage) => void;\n onVariations?: (image: ImageGenerationImage) => void;\n presets?: ImageGenerationPreset[];\n /** Batch progress, 0–1. Drives every tile's mosaic-to-sharp resolve. */\n progress?: number;\n prompt?: string;\n /** Batch seed, shown in the composer readout. */\n seed?: string;\n /** Controlled status. Omit to run the panel's own queued → done cycle. */\n status?: ImageGenerationStatus;\n /**\n * Renders the prompt as read-only text with a blinking caret. Use while\n * replaying or streaming a prompt into the field.\n */\n typing?: boolean;\n};\n\n/* -------------------------------------------------------------------------- */\n/* Static config */\n/* -------------------------------------------------------------------------- */\n\nconst DEFAULT_ASPECT_RATIOS: ImageGenerationAspectRatio[] = [\n { id: \"square\", label: \"1:1\", value: \"1 / 1\" },\n { id: \"portrait\", label: \"4:5\", value: \"4 / 5\" },\n { id: \"wide\", label: \"16:9\", value: \"16 / 9\" },\n];\n\nconst STATUS_META: Record<\n ImageGenerationStatus,\n { dot: string; label: string }\n> = {\n done: { dot: \"bg-emerald-500\", label: \"Ready\" },\n error: { dot: \"bg-destructive\", label: \"Failed\" },\n generating: { dot: \"bg-brand\", label: \"Rendering\" },\n idle: { dot: \"bg-muted-foreground/40\", label: \"Idle\" },\n queued: { dot: \"bg-amber-500\", label: \"Queued\" },\n};\n\nconst TILE_ACTION_CLASS =\n \"relative flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/55 text-white backdrop-blur-sm transition-colors duration-150 ease-out before:absolute before:-inset-1 before:content-[''] hover:bg-black/75 focus-visible:outline-2 focus-visible:outline-white/90 focus-visible:outline-offset-2 motion-reduce:transition-none\";\n\n/* -------------------------------------------------------------------------- */\n/* Tile */\n/* -------------------------------------------------------------------------- */\n\ntype TileProps = {\n aspectRatio: string;\n image?: ImageGenerationImage;\n index: number;\n onSelect?: (image: ImageGenerationImage) => void;\n onVariations?: (image: ImageGenerationImage) => void;\n progress: number;\n shouldReduceMotion: boolean;\n status: ImageGenerationStatus;\n};\n\nconst EmptyTile = ({\n aspectRatio,\n isQueued,\n shouldReduceMotion,\n}: {\n aspectRatio: string;\n isQueued: boolean;\n shouldReduceMotion: boolean;\n}) => (\n \n {isQueued ? (\n \n ) : null}\n \n \n {isQueued ? \"Queued\" : \"Empty\"}\n \n \n);\n\nconst ImageGenerationTile = ({\n aspectRatio,\n image,\n index,\n onSelect,\n onVariations,\n progress,\n shouldReduceMotion,\n status,\n}: TileProps) => {\n if (!image) {\n return (\n \n );\n }\n\n const local = shouldReduceMotion ? 1 : progress;\n const isResolving = local < 1;\n const sharpness = local ** SHARPEN_EXPONENT;\n\n const mosaicOpacity = 1 - ramp(local, MOSAIC_FADE_START, MOSAIC_FADE_SPAN);\n const sharpOpacity = ramp(local, SHARP_FADE_START, SHARP_FADE_SPAN);\n const sharpBlur = MAX_SHARP_BLUR_PX * (1 - sharpness);\n\n const canAct = !isResolving && status === \"done\";\n\n return (\n \n {/* Blocky first pass — a low-res mosaic of the real result. */}\n \n\n {/* The result, sharpening as it crossfades over the mosaic. */}\n 0 ? `blur(${sharpBlur}px)` : undefined,\n opacity: sharpOpacity,\n transform: `scale(${1 + FOCUS_PULL_SCALE * (1 - local)})`,\n }}\n />\n\n {isResolving && !shouldReduceMotion ? (\n \n {/* Gradient trail — dark at the tail, brightening toward the edge. */}\n \n {/* Soft leading edge: a blurred bloom that glows over the image. */}\n \n {/* The band itself — a crisp, clearly visible bright line. */}\n \n \n ) : null}\n\n
\n \n \n {isResolving\n ? `${Math.round(local * PERCENT)}%`\n : (image.seed ?? \"done\")}\n \n \n
\n\n {isResolving ? (\n \n \n \n ) : null}\n\n {canAct ? (\n
\n \n \n \n {onVariations ? (\n onVariations(image)}\n type=\"button\"\n >\n \n \n ) : null}\n {onSelect ? (\n onSelect(image)}\n type=\"button\"\n >\n \n \n ) : null}\n
\n ) : null}\n \n );\n};\n\n/* -------------------------------------------------------------------------- */\n/* Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * A text-to-image generation console: prompt and settings on the left, the\n * batch resolving on the right.\n *\n * The reveal is the whole point. Each tile starts as a pixelated, blurred\n * mosaic of its own result and sharpens as `progress` climbs, with a scan line\n * travelling down it and a live percentage — so a still frame of this component\n * already tells you images are being generated, which a grey skeleton never does.\n *\n * `status` is controllable, but most consumers won't bother — left undefined the\n * panel runs its own queued → generating → done / error cycle around whatever\n * `onGenerate` resolves to. `images` and `progress` stay the caller's\n * responsibility either way, since only the caller knows how a real generation\n * job reports partial results.\n */\nconst ImageGenerationPanel = ({\n aspectRatio,\n aspectRatios = DEFAULT_ASPECT_RATIOS,\n chrome = \"full\",\n className,\n composerPlacement = \"top\",\n count = DEFAULT_COUNT,\n error,\n images = [],\n model = \"smoothui-diffusion v2\",\n onAspectRatioChange,\n onCancel,\n onGenerate,\n onPromptChange,\n onRetry,\n onSelect,\n onVariations,\n presets = [],\n progress = 0,\n prompt,\n seed,\n status,\n typing = false,\n}: ImageGenerationPanelProps) => {\n const shouldReduceMotion = Boolean(useReducedMotion());\n const panelId = useId();\n\n const [internalPrompt, setInternalPrompt] = useState(\"\");\n const [internalStatus, setInternalStatus] =\n useState(\"idle\");\n const [internalRatio, setInternalRatio] = useState(\n aspectRatios[0]?.value ?? DEFAULT_ASPECT_RATIO\n );\n\n const isPromptControlled = prompt !== undefined;\n const draft = isPromptControlled ? prompt : internalPrompt;\n\n const isStatusControlled = status !== undefined;\n const effectiveStatus = isStatusControlled ? status : internalStatus;\n const isBusy =\n effectiveStatus === \"queued\" || effectiveStatus === \"generating\";\n\n const isRatioControlled = aspectRatio !== undefined;\n const activeRatio = isRatioControlled ? aspectRatio : internalRatio;\n\n const setDraft = (value: string) => {\n if (!isPromptControlled) {\n setInternalPrompt(value);\n }\n onPromptChange?.(value);\n };\n\n const pickRatio = (value: string) => {\n if (!isRatioControlled) {\n setInternalRatio(value);\n }\n onAspectRatioChange?.(value);\n };\n\n const togglePreset = (preset: ImageGenerationPreset) => {\n if (isBusy) {\n return;\n }\n const marker = `, ${preset.label}`;\n setDraft(\n draft.includes(marker) ? draft.replace(marker, \"\") : `${draft}${marker}`\n );\n };\n\n const handleGenerate = async () => {\n if (!(draft.trim() && onGenerate) || isBusy) {\n return;\n }\n if (isStatusControlled) {\n await onGenerate(draft.trim());\n return;\n }\n setInternalStatus(\"queued\");\n try {\n // A macrotask gap so \"queued\" commits a frame before flipping to\n // \"generating\" — otherwise React batches both and queued is never seen.\n await new Promise((resolve) => setTimeout(resolve, 0));\n setInternalStatus(\"generating\");\n await onGenerate(draft.trim());\n setInternalStatus(\"done\");\n } catch {\n setInternalStatus(\"error\");\n }\n };\n\n const statusMeta = STATUS_META[effectiveStatus];\n const percent = Math.round(clamp01(progress) * PERCENT);\n\n /**\n * Only two panel states change the composer: a run the caller can interrupt\n * turns send into stop, and a failure rings the field to back the banner up.\n * \"Done\" deliberately stays neutral — the status pill, the footer and the\n * tile's seed all report it already, and a ring that lights up on every pass\n * of a looping demo is noise, not feedback.\n */\n const composerState: AIState = (() => {\n if (effectiveStatus === \"error\") {\n return \"error\";\n }\n if (isBusy) {\n return onCancel ? \"streaming\" : \"thinking\";\n }\n return \"idle\";\n })();\n\n const announcement = (() => {\n switch (effectiveStatus) {\n case \"queued\":\n return \"Request queued.\";\n case \"generating\":\n return `Generating ${count} images, ${percent} percent.`;\n case \"done\":\n return `${count} images ready.`;\n case \"error\":\n return error ?? \"Generation failed.\";\n default:\n return \"\";\n }\n })();\n\n const isMinimal = chrome === \"minimal\";\n const isComposerFirst = composerPlacement === \"top\";\n const showSeed = !isMinimal;\n const hasComposerMeta =\n presets.length > 0 || aspectRatios.length > 0 || showSeed;\n\n const composer = (\n \n {/* The composer is AIPromptInput — the library's own chat-style field, so\n the prompt bar here behaves exactly like the one in every other AI\n surface: one rounded container, focus on the container, the send\n control inside it, Enter to submit and Shift+Enter for a newline. */}\n
\n \n {typing ? (\n \n {draft}\n \n

\n ) : null}\n
\n\n {hasComposerMeta ? (\n
\n {presets.length > 0 ? (\n
\n {presets.map((preset) => {\n const active = draft.includes(`, ${preset.label}`);\n return (\n togglePreset(preset)}\n type=\"button\"\n >\n {preset.label}\n \n );\n })}\n
\n ) : null}\n\n {aspectRatios.length > 0 ? (\n
\n {aspectRatios.map((ratio) => {\n const active = ratio.value === activeRatio;\n return (\n pickRatio(ratio.value)}\n type=\"button\"\n >\n {active ? (\n \n ) : null}\n {ratio.label}\n \n );\n })}\n
\n ) : null}\n\n {showSeed ? (\n \n seed\n {seed ?? \"—\"}\n \n ) : null}\n
\n ) : null}\n \n );\n\n const tiles = (\n \n {Array.from({ length: count }, (_, index) => (\n \n ))}\n \n );\n\n const body = isComposerFirst ? (\n <>\n {composer}\n {tiles}\n \n ) : (\n <>\n {tiles}\n {composer}\n \n );\n\n return (\n \n {isMinimal ? null : (\n
\n
\n \n \n \n
\n

\n Image generation\n

\n

\n {model}\n

\n
\n
\n \n \n {statusMeta.label}\n \n
\n )}\n\n \n {announcement}\n \n\n {body}\n\n {effectiveStatus === \"error\" ? (\n \n \n \n {error ?? \"Something went wrong generating these images.\"}\n \n {onRetry ? (\n \n Retry\n \n ) : null}\n \n ) : null}\n\n {isMinimal ? null : (\n <>\n
\n {isBusy ? (\n \n ) : (\n \n {effectiveStatus === \"done\"\n ? `${count} images · ${activeRatio.replace(/\\s/g, \"\")}`\n : `${count} images · ${activeRatio.replace(/\\s/g, \"\")} · ready when you are`}\n \n )}\n {percent}%\n
\n\n \n \n \n \n )}\n \n );\n};\n\nexport default ImageGenerationPanel;\n","path":"index.tsx","target":"components/smoothui/image-generation-panel/index.tsx","type":"registry:ui"}],"name":"image-generation-panel","registryDependencies":["https://smoothui.dev/r/ai-core.json","https://smoothui.dev/r/ai-loader.json","https://smoothui.dev/r/ai-prompt-input.json","https://smoothui.dev/r/tokens.json"],"title":"Image Generation Panel","type":"registry:ui"}