From 5de9f4bce3d1f134e7e6fd83fa337551a6dc90bf Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Mon, 15 Jun 2026 16:51:32 +1000
Subject: [PATCH] Render Cloud Image editor preview through runtime CloudImage

The Keystatic editor preview rendered a bespoke plain <img> with its own
inline styles, while production rendered the unpic-transformed, clamped
image via CloudImage. Collapse to one rendering path so the preview
matches what ships. Guard the empty-URL case during editing since
CloudImage throws on an invalid URL.
---
 .../keystatic/component-block/cloud-image.tsx | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/lib/keystatic/component-block/cloud-image.tsx b/apps/web/src/lib/keystatic/component-block/cloud-image.tsx
index 601aa9f..2d19f16 100644
--- a/apps/web/src/lib/keystatic/component-block/cloud-image.tsx
+++ b/apps/web/src/lib/keystatic/component-block/cloud-image.tsx
@@ -1,31 +1,33 @@
-/** @jsxRuntime classic */
 import { component, fields } from '@keystatic/core';
-// biome-ignore lint/correctness/noUnusedImports: React is used by the classic JSX runtime.
-import * as React from 'react';
+
+import { CloudImage } from '../renderers/cloud-image';
 
 export const cloudImage = component({
 	label: 'Cloud Image',
 	preview({ fields }) {
 		const src = fields.src.value;
 
+		// `CloudImage` calls `new URL(src)` and throws on any not-yet-valid URL
+		// (empty, whitespace-only, or missing protocol), so guard while the
+		// author is still typing.
+		if (!URL.canParse(src)) {
+			return (
+				<figure style={{ margin: 0 }}>
+					<span style={{ color: '#6b7280', fontSize: 12 }}>
+						No image URL yet
+					</span>
+				</figure>
+			);
+		}
+
 		return (
-			<figure style={{ margin: 0 }}>
-				<img
-					alt={fields.alt.value}
-					src={src}
-					style={{
-						display: 'block',
-						maxHeight: 368,
-						maxWidth: '100%',
-						objectFit: 'contain',
-					}}
-				/>
-				{fields.priority.value ? (
-					<figcaption style={{ fontSize: 12, marginTop: 8 }}>
-						Priority image
-					</figcaption>
-				) : null}
-			</figure>
+			<CloudImage
+				alt={fields.alt.value}
+				height={fields.height.value}
+				priority={fields.priority.value}
+				src={src}
+				width={fields.width.value}
+			/>
 		);
 	},
 	schema: {