@aphexcms/cms-core 8.1.0 → 9.1.0

package/dist/components/admin/DocumentVersionPanel.svelte

@@ -18,8 +18,7 @@
 		) => void;
 	}
 
-	let { documentId, onClose, onRestored, onPreviewVersion }: Props = $props();
-	void onRestored;
+	let { documentId, onClose, onPreviewVersion }: Props = $props();
 
 	let versions = $state<any[]>([]);
 	let loading = $state(true);
@@ -120,6 +119,8 @@
 			</div>
 		{:else}
 			{#each filteredVersions as version, i}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
 					data-version-id={i}
 					class="hover:bg-muted w-full cursor-pointer border-b px-3 py-2.5 text-left transition-colors {previewVersion?.versionNumber ===

package/dist/components/admin/DocumentVersionPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentVersionPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/DocumentVersionPanel.svelte.ts"],"names":[],"mappings":"AASC,UAAU,KAAK;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAClB,OAAO,EAAE;QACR,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,IAAI,KACJ,IAAI,CAAC;CACV;AAkIF,QAAA,MAAM,oBAAoB;;MAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DocumentVersionPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/DocumentVersionPanel.svelte.ts"],"names":[],"mappings":"AASC,UAAU,KAAK;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAClB,OAAO,EAAE;QACR,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,IAAI,KACJ,IAAI,CAAC;CACV;AAmIF,QAAA,MAAM,oBAAoB;;MAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/admin/MediaBrowser.svelte

@@ -106,7 +106,8 @@
 	// Bulk selection state
 	let selectMode = $state(false);
 	let selectedIds = $state<Set<string>>(
-		selectable && multiSelect && existingAssetIds ? new Set(existingAssetIds) : new Set()
+		(() =>
+			selectable && multiSelect && existingAssetIds ? new Set(existingAssetIds) : new Set())()
 	);
 	let isBulkDeleting = $state(false);
 
@@ -166,7 +167,7 @@
 				// Fetch reference counts for this page
 				fetchReferenceCounts(result.data.map((a) => a.id));
 			}
-		} catch (err) {
+		} catch {
 			toast.error('Failed to fetch assets');
 		} finally {
 			loading = false;
@@ -186,7 +187,7 @@
 			if (result.success && result.data) {
 				referenceCounts = { ...referenceCounts, ...result.data };
 			}
-		} catch (err) {
+		} catch {
 			toast.error('Failed to fetch reference counts');
 		}
 	}
@@ -200,7 +201,7 @@
 				selectedAssetRefs = result.data.references;
 				selectedRefCount = result.data.total;
 			}
-		} catch (err) {
+		} catch {
 			toast.error('Failed to fetch asset references');
 			selectedAssetRefs = [];
 			selectedRefCount = 0;
@@ -284,7 +285,7 @@
 			if (result.success && result.data) {
 				referenceCounts = { ...referenceCounts, ...result.data };
 			}
-		} catch (err) {
+		} catch {
 			toast.error('Failed to check references');
 		}
 
@@ -316,7 +317,7 @@
 				selectedIds = new Set();
 				await fetchAssets();
 			}
-		} catch (err) {
+		} catch {
 			toast.error('Failed to delete assets');
 		} finally {
 			isBulkDeleting = false;
@@ -424,7 +425,7 @@
 				assetList = assetList.map((a) => (a.id === selectedAsset!.id ? result.data! : a));
 				selectedAsset = result.data;
 			}
-		} catch (err) {
+		} catch {
 			toast.error('Failed to save metadata');
 		} finally {
 			isSaving = false;
@@ -433,6 +434,14 @@
 
 	// Delete asset
 	async function deleteAsset(asset: Asset) {
+		try {
+			const result = await assets.getReferenceCounts([asset.id]);
+			if (result.success && result.data) {
+				referenceCounts = { ...referenceCounts, ...result.data };
+			}
+		} catch {
+			// Fall through to cached count
+		}
 		const refCount = referenceCounts[asset.id] || 0;
 		if (refCount > 0) {
 			toast.error(
@@ -455,7 +464,7 @@
 				}
 				await fetchAssets();
 			}
-		} catch (err) {
+		} catch {
 			toast.error('Failed to delete asset');
 		}
 	}
@@ -826,12 +835,21 @@
 											</div>
 										{/if}
 										{#if selectable}
-											<!-- Info button to view details without selecting -->
-											<button
+											<!-- svelte-ignore a11y_no_static_element_interactions -->
+											<div
+												role="button"
+												tabindex="0"
 												onclick={(e) => {
 													e.stopPropagation();
 													openAssetDetail(asset);
 												}}
+												onkeydown={(e) => {
+													if (e.key === 'Enter' || e.key === ' ') {
+														e.preventDefault();
+														e.stopPropagation();
+														openAssetDetail(asset);
+													}
+												}}
 												class="bg-background/80 absolute top-1.5 right-1.5 rounded p-1 opacity-0 transition-opacity group-hover:opacity-100"
 												title="View details"
 											>
@@ -848,7 +866,7 @@
 														d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 													/>
 												</svg>
-											</button>
+											</div>
 										{:else if isSelectMode}
 											<!-- Checkbox overlay for bulk mode -->
 											<div class="absolute top-1.5 left-1.5">

package/dist/components/admin/MediaBrowser.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/MediaBrowser.svelte.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAS9C,UAAU,KAAK;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAC7C,oCAAoC;IACpC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC/B;AAgqCF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MediaBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/MediaBrowser.svelte.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAS9C,UAAU,KAAK;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAC7C,oCAAoC;IACpC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC/B;AA+qCF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/admin/ObjectModal.svelte

@@ -53,10 +53,6 @@
 	const backdropZ = $derived(50 + Math.max(myDepth - 1, 0) * 10);
 	const panelZ = $derived(backdropZ + 1);
 
-	// Handle backdrop click — only close if this is the topmost modal, so a
-	// click that visually lands on a parent's backdrop (because the inner
-	// backdrop doesn't extend that far) doesn't accidentally close the
-	// parent.
 	function isTopmost(): boolean {
 		return myDepth === modalStack;
 	}
@@ -75,89 +71,80 @@
 </script>
 
 {#if open}
-	<!-- NOTE: scoped to the editor area via `absolute inset-0` (DocumentEditor
-	     is the nearest positioned ancestor). The trade-off: a nested modal's
-	     backdrop only covers its parent panel, so clicks in the truly
-	     "outside" region land on the grandparent backdrop. The modalStack
-	     check above neutralises that case (only the topmost modal reacts).
-	     We may later move this to a viewport-level portal so nested
-	     backdrops cover the full screen, but for now keeping it inside the
-	     editor is the design we want. -->
 	<div
-		class="bg-background/80 absolute inset-0"
+		class="bg-background/80 absolute inset-0 flex items-center justify-center p-4 lg:p-6"
 		style="z-index: {backdropZ}"
 		onclick={handleBackdropClick}
 		onkeydown={handleKeydown}
 		role="button"
 		tabindex="-1"
-	></div>
-
-	<!-- Panel: centered dialog. max-h is relative to the editor container
-	     so tall schemas scroll inside the panel instead of being clipped;
-	     min-h-0 on the body (below) is what actually lets the inner
-	     overflow-auto take effect inside this flex column. -->
-	<div
-		class="border-border bg-background absolute top-1/2 left-1/2 flex max-h-[calc(100%-4rem)] w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border shadow-lg"
-		style="z-index: {panelZ}"
 	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="border-border bg-background flex shrink-0 items-center justify-between gap-3 border-b px-4 py-2"
+			class="border-border bg-background max-h-full w-full max-w-3xl overflow-auto rounded-lg border shadow-lg"
+			style="z-index: {panelZ}"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
 		>
-			<span class="text-sm font-medium">Edit {schema.title}</span>
-			<div class="flex items-center gap-2">
-				{#if saveState}
-					{#if saveState.saving}
-						<span
-							class="text-muted-foreground inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wider whitespace-nowrap uppercase"
-						>
-							<span class="bg-muted-foreground/60 h-1.5 w-1.5 animate-pulse rounded-full"></span>
-							Saving
-						</span>
-					{:else if saveState.hasUnsavedChanges}
-						<span
-							class="text-muted-foreground inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wider whitespace-nowrap uppercase"
-						>
-							<span class="bg-muted-foreground/60 h-1.5 w-1.5 rounded-full"></span>
-							Unsaved
-						</span>
-					{:else if saveState.savedAgoText}
-						<span
-							class="text-muted-foreground inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wider whitespace-nowrap uppercase"
-						>
-							<span class="bg-muted-foreground/60 h-1.5 w-1.5 rounded-full"></span>
-							Auto-saved
-						</span>
+			<div
+				class="border-border bg-background sticky top-0 z-10 flex items-center justify-between gap-3 border-b px-4 py-2"
+			>
+				<span class="text-sm font-medium">Edit {schema.title}</span>
+				<div class="flex items-center gap-2">
+					{#if saveState}
+						{#if saveState.saving}
+							<span
+								class="text-muted-foreground inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wider whitespace-nowrap uppercase"
+							>
+								<span class="bg-muted-foreground/60 h-1.5 w-1.5 animate-pulse rounded-full"></span>
+								Saving
+							</span>
+						{:else if saveState.hasUnsavedChanges}
+							<span
+								class="text-muted-foreground inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wider whitespace-nowrap uppercase"
+							>
+								<span class="bg-muted-foreground/60 h-1.5 w-1.5 rounded-full"></span>
+								Unsaved
+							</span>
+						{:else if saveState.savedAgoText}
+							<span
+								class="text-muted-foreground inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wider whitespace-nowrap uppercase"
+							>
+								<span class="bg-muted-foreground/60 h-1.5 w-1.5 rounded-full"></span>
+								Auto-saved
+							</span>
+						{/if}
 					{/if}
-				{/if}
-				<Button variant="ghost" size="icon" class="h-7 w-7" onclick={onClose}>
-					<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
-				</Button>
+					<Button variant="ghost" size="icon" class="h-7 w-7" onclick={onClose}>
+						<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</Button>
+				</div>
 			</div>
-		</div>
 
-		<div class="bg-background min-h-0 flex-1 space-y-3 overflow-auto p-4">
-			{#if schema.fields}
-				{#each schema.fields as field, index (index)}
-					<SchemaField
-						{field}
-						value={(value ?? {})[field.name]}
-						documentData={value ?? {}}
-						onUpdate={(newValue) => {
-							onUpdate({ ...value, [field.name]: newValue });
-						}}
-						{onOpenReference}
-						{readonly}
-						{organizationId}
-					/>
-				{/each}
-			{/if}
+			<div class="bg-background space-y-3 p-4">
+				{#if schema.fields}
+					{#each schema.fields as field, index (index)}
+						<SchemaField
+							{field}
+							value={(value ?? {})[field.name]}
+							documentData={value ?? {}}
+							onUpdate={(newValue) => {
+								onUpdate({ ...value, [field.name]: newValue });
+							}}
+							{onOpenReference}
+							{readonly}
+							{organizationId}
+						/>
+					{/each}
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}

package/dist/components/admin/ObjectModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/ObjectModal.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKxD,UAAU,KAAK;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA6GF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ObjectModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/ObjectModal.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKxD,UAAU,KAAK;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAwGF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/admin/SchemaField.svelte

@@ -61,7 +61,7 @@
 	}: Props = $props();
 
 	// Build full field path
-	const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name;
+	const fieldPath = $derived(parentPath ? `${parentPath}.${field.name}` : field.name);
 
 	// Validation state for the wrapper (displays errors and status)
 	let validationErrors = $state<ValidationError[]>([]);
@@ -239,7 +239,7 @@
 				{/each}
 			</div>
 
-			<!-- Array Field -->
+			<!-- Array Field (includes block content editor when of contains {type: 'block'}) -->
 		{:else if field.type === 'array' && field.of}
 			<ArrayField {field} {value} {onUpdate} {onOpenReference} {readonly} {organizationId} />
 

package/dist/components/admin/fields/ArrayField.svelte

@@ -33,6 +33,7 @@
 	import { documents } from '../../../api/documents';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { getDocumentVersion } from '../../../document-refresh.svelte';
+	import RichtextField from './richtext/RichtextField.svelte';
 
 	interface Props {
 		field: ArrayFieldType;
@@ -73,6 +74,7 @@
 		return getSchemaByName(schemas, typeName);
 	}
 
+	const isBlockArray = $derived(field.of.some((ref) => ref.type === 'block'));
 	const isGridLayout = $derived(field.options?.layout === 'grid');
 	const isReferenceArray = $derived(
 		field.of && field.of.length > 0 && field.of[0]?.type === 'reference'
@@ -320,7 +322,7 @@
 				_key: generateKey(),
 				asset: { _type: 'reference', _ref: result.data!.id }
 			};
-		} catch (error) {
+		} catch {
 			toast.error(`Failed to upload ${file.name}`);
 			return null;
 		}
@@ -494,7 +496,9 @@
 	}
 </script>
 
-{#if isReferenceArray && referenceFieldShape}
+{#if isBlockArray}
+	<RichtextField {field} {value} {onUpdate} {readonly} {onOpenReference} {organizationId} />
+{:else if isReferenceArray && referenceFieldShape}
 	<!-- Reference array — each row reuses ReferenceField. Drag handle on the
 	     left, ReferenceField fills the row, an X button on empty rows lets the
 	     user discard a never-picked row (populated rows use ReferenceField's
@@ -599,6 +603,8 @@
 								class="border-border/50 bg-background group relative aspect-square overflow-hidden rounded-md border"
 								class:opacity-50={sortable.isDragging}
 							>
+								<!-- svelte-ignore a11y_click_events_have_key_events -->
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
 								<div
 									class="h-full w-full cursor-pointer"
 									onclick={() => handleOpenImageModal(index)}
@@ -695,6 +701,8 @@
 									</button>
 								{/if}
 
+								<!-- svelte-ignore a11y_click_events_have_key_events -->
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
 								<div
 									class="min-w-0 flex-1 cursor-pointer text-left"
 									onclick={() => handleOpenImageModal(index)}
@@ -925,7 +933,9 @@
 								class="flex flex-1 cursor-pointer items-center gap-2 self-stretch truncate px-1 py-2 text-left text-sm"
 								onclick={() => handleEditItem(index)}
 							>
-								<span class="text-muted-foreground flex h-5 w-5 shrink-0 items-center justify-center">
+								<span
+									class="text-muted-foreground flex h-5 w-5 shrink-0 items-center justify-center"
+								>
 									{#if getItemIcon(item)}
 										{@const Icon = getItemIcon(item)}
 										<Icon class="h-4 w-4" />

package/dist/components/admin/fields/ArrayField.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ArrayField.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAc,MAAM,wBAAwB,CAAC;AA8BtF,UAAU,KAAK;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAq5BF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ArrayField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ArrayField.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAc,MAAM,wBAAwB,CAAC;AA+BtF,UAAU,KAAK;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA65BF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/admin/fields/FileField.svelte

@@ -189,7 +189,7 @@
 							toast.error('Failed to fetch asset details');
 							assetData = null;
 						}
-					} catch (error) {
+					} catch {
 						toast.error('Failed to load file asset');
 						assetData = null;
 					} finally {

package/dist/components/admin/fields/ImageField.svelte

@@ -188,7 +188,7 @@
 							toast.error('Failed to fetch asset details');
 							assetData = null;
 						}
-					} catch (error) {
+					} catch {
 						toast.error('Failed to load image asset');
 						assetData = null;
 					} finally {

package/dist/components/admin/fields/ReferenceField.svelte

@@ -42,14 +42,16 @@
 	const refId = $derived(value?._ref ?? null);
 
 	// Cast to reference field type
-	const referenceField = field as ReferenceFieldType;
-	const targetType = referenceField.to?.[0]?.type;
+	const referenceField = $derived(field as ReferenceFieldType);
+	const targetType = $derived(referenceField.to?.[0]?.type);
 
 	const schemas = getSchemaContext();
 	const targetSchema = $derived(targetType ? getSchemaByName(schemas, targetType) : null);
 	const TargetIcon = $derived(targetSchema?.icon ?? null);
 
 	// State
+	let inputWrapperEl = $state<HTMLElement>();
+	let dropdownPos = $state({ top: 0, left: 0, width: 0 });
 	let open = $state(false);
 	let searchResults = $state<any[]>([]);
 	let selectedDocument = $state<any>(null);
@@ -78,7 +80,7 @@
 					if (doc.success) {
 						selectedDocument = doc.data;
 					}
-				} catch (err) {
+				} catch {
 					toast.error('Failed to load referenced document');
 					selectedDocument = null;
 				}
@@ -145,6 +147,18 @@
 		});
 	});
 
+	function updateDropdownPos() {
+		if (!inputWrapperEl) return;
+		const rect = inputWrapperEl.getBoundingClientRect();
+		dropdownPos = { top: rect.bottom + 4, left: rect.left, width: rect.width };
+	}
+
+	$effect(() => {
+		if (open && inputWrapperEl) {
+			updateDropdownPos();
+		}
+	});
+
 	function closeAndFocusTrigger() {
 		open = false;
 	}
@@ -196,7 +210,7 @@
 				onUpdate({ _type: 'reference', _ref: result.data.id });
 				closeAndFocusTrigger();
 			}
-		} catch (err) {
+		} catch {
 			toast.error('Failed to create document');
 		} finally {
 			creating = false;
@@ -291,22 +305,33 @@
 {:else}
 	<!-- Inline empty state: search input + chevron + Create button. The input
 	     is the primary focus target — the results dropdown is a sibling div
-	     positioned absolutely under the input wrapper, with click-outside
-	     closing it. No popover wrapping the input, so no double-click. -->
+	     positioned with fixed so it escapes overflow containers (e.g. modals),
+	     with click-outside closing it. No popover wrapping the input, so no
+	     double-click. -->
 	<div class="flex items-center gap-1">
-		<div class="relative min-w-0 flex-1" use:clickOutside={() => (open = false)}>
+		<div
+			bind:this={inputWrapperEl}
+			class="relative min-w-0 flex-1"
+			use:clickOutside={() => (open = false)}
+		>
 			<div
 				class="border-input bg-background focus-within:ring-ring flex h-9 items-center rounded-md border focus-within:ring-1"
 			>
 				<Input
 					bind:value={query}
 					placeholder="Type to search..."
-					onfocus={() => (open = true)}
+					onfocus={() => {
+						updateDropdownPos();
+						open = true;
+					}}
 					class="h-8 border-0 bg-transparent shadow-none focus-visible:ring-0"
 				/>
 				<button
 					type="button"
-					onclick={() => (open = !open)}
+					onclick={() => {
+						updateDropdownPos();
+						open = !open;
+					}}
 					class="text-muted-foreground hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center"
 					aria-label="Toggle results"
 				>
@@ -315,7 +340,11 @@
 			</div>
 			{#if open}
 				<div
-					class="bg-popover text-popover-foreground absolute top-full left-0 z-[9999] mt-1 w-[400px] max-w-[min(400px,calc(100vw-2rem))] rounded-md border p-0 shadow-md"
+					class="bg-popover text-popover-foreground fixed z-[9999] rounded-md border p-0 shadow-md"
+					style="top: {dropdownPos.top}px; left: {dropdownPos.left}px; width: {Math.min(
+						400,
+						dropdownPos.width
+					)}px;"
 				>
 					<Command.Root shouldFilter={false}>
 						<Command.List class="max-h-[300px] overflow-y-auto">
@@ -351,7 +380,9 @@
 												</span>
 											</div>
 											{#if doc._meta?.status === 'published'}
-												<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-green-500" title="Published"
+												<span
+													class="h-1.5 w-1.5 shrink-0 rounded-full bg-green-500"
+													title="Published"
 												></span>
 											{:else if doc._meta?.status === 'unpublished'}
 												<span

package/dist/components/admin/fields/ReferenceField.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReferenceField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ReferenceField.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,KAAK,EAAwC,MAAM,wBAAwB,CAAC;AAUzF,KAAK,cAAc,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAqUF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ReferenceField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ReferenceField.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,KAAK,EAAwC,MAAM,wBAAwB,CAAC;AAUzF,KAAK,cAAc,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AA4VF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/admin/fields/richtext/PortableTextImageView.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { Trash2, Image as ImageIcon } from '@lucide/svelte';
+	import { assets } from '../../../../api/assets';
+
+	interface Props {
+		type: string;
+		nodeKey: string;
+		data: Record<string, unknown>;
+		selected?: boolean;
+		onEdit: () => void;
+		onDelete: () => void;
+	}
+
+	let { data, selected = false, onEdit, onDelete }: Props = $props();
+
+	const assetRef = $derived((data?.asset as any)?._ref as string | undefined);
+	const assetPromise = $derived(assetRef ? assets.getById(assetRef) : null);
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="image-block-view group" class:selected onclick={onEdit}>
+	{#if assetPromise}
+		{#await assetPromise}
+			<div class="image-block-placeholder">
+				<div
+					class="border-primary h-5 w-5 animate-spin rounded-full border-2 border-t-transparent"
+				></div>
+			</div>
+		{:then result}
+			{#if result.success && result.data?.url}
+				<img src={result.data.url} alt={result.data.alt || ''} class="image-block-img" />
+			{:else}
+				<div class="image-block-placeholder">
+					<ImageIcon class="text-muted-foreground h-8 w-8" />
+					<span class="text-muted-foreground text-xs">Image not found</span>
+				</div>
+			{/if}
+		{:catch}
+			<div class="image-block-placeholder">
+				<ImageIcon class="text-muted-foreground h-8 w-8" />
+				<span class="text-muted-foreground text-xs">Failed to load</span>
+			</div>
+		{/await}
+	{:else}
+		<div class="image-block-placeholder">
+			<ImageIcon class="text-muted-foreground h-8 w-8" />
+			<span class="text-muted-foreground text-xs">No image</span>
+		</div>
+	{/if}
+
+	<div class="image-block-actions">
+		<button
+			type="button"
+			class="text-muted-foreground hover:text-destructive rounded p-1 transition-colors"
+			onclick={(e) => {
+				e.stopPropagation();
+				onDelete();
+			}}
+			title="Remove"
+		>
+			<Trash2 class="h-3.5 w-3.5" />
+		</button>
+	</div>
+</div>
+
+<style>
+	.image-block-view {
+		position: relative;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		background: var(--muted);
+		margin: 0.5em 0;
+		overflow: hidden;
+		cursor: pointer;
+		transition: border-color 0.15s;
+	}
+
+	.image-block-view.selected {
+		border-color: var(--primary);
+		box-shadow: 0 0 0 1px var(--primary);
+	}
+
+	.image-block-img {
+		display: block;
+		max-width: 100%;
+		max-height: 400px;
+		object-fit: contain;
+	}
+
+	.image-block-placeholder {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		width: 100%;
+		height: 120px;
+	}
+
+	.image-block-actions {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		opacity: 0;
+		transition: opacity 0.15s;
+	}
+
+	.image-block-view:hover .image-block-actions {
+		opacity: 1;
+	}
+</style>