@aphexcms/cms-core 9.0.0 → 9.2.0

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'
@@ -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)}

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/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);
@@ -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;
 	}
@@ -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">

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>

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

@@ -0,0 +1,12 @@
+interface Props {
+    type: string;
+    nodeKey: string;
+    data: Record<string, unknown>;
+    selected?: boolean;
+    onEdit: () => void;
+    onDelete: () => void;
+}
+declare const PortableTextImageView: import("svelte").Component<Props, {}, "">;
+type PortableTextImageView = ReturnType<typeof PortableTextImageView>;
+export default PortableTextImageView;
+//# sourceMappingURL=PortableTextImageView.svelte.d.ts.map

package/dist/components/admin/fields/richtext/PortableTextImageView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortableTextImageView.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/admin/fields/richtext/PortableTextImageView.svelte.ts"],"names":[],"mappings":"AAOC,UAAU,KAAK;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AAwDF,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,111 @@
+<script lang="ts">
+	interface Props {
+		type: string;
+		nodeKey: string;
+		data: Record<string, unknown>;
+		selected: boolean;
+		onEdit: () => void;
+		onDelete: () => void;
+	}
+
+	let { type, data, selected, onEdit, onDelete }: Props = $props();
+
+	const label = $derived(
+		(data?.title as string) || (data?.text as string) || (data?.name as string) || type
+	);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	class="inline-object-chip"
+	class:selected
+	onclick={onEdit}
+	title="Edit {type}"
+	role="button"
+	tabindex="0"
+	onkeydown={(e) => {
+		if (e.key === 'Enter') onEdit();
+	}}
+>
+	<span class="inline-object-type">{type.slice(0, 2).toUpperCase()}</span>
+	<span class="inline-object-label">{label}</span>
+	<button
+		class="inline-object-delete"
+		onclick={(e) => {
+			e.stopPropagation();
+			onDelete();
+		}}
+		title="Remove">×</button
+	>
+</span>
+
+<style>
+	.inline-object-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+		padding: 1px 6px 1px 2px;
+		border-radius: 4px;
+		border: 1px solid var(--border);
+		background: var(--muted);
+		font-size: 0.75rem;
+		line-height: 1.4;
+		cursor: pointer;
+		vertical-align: baseline;
+		transition: border-color 0.15s;
+	}
+
+	.inline-object-chip:hover,
+	.inline-object-chip.selected {
+		border-color: var(--primary);
+	}
+
+	.inline-object-type {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		border-radius: 2px;
+		background: var(--muted-foreground);
+		color: var(--background);
+		font-size: 8px;
+		font-weight: 600;
+		flex-shrink: 0;
+	}
+
+	.inline-object-label {
+		max-width: 120px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--foreground);
+	}
+
+	.inline-object-delete {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 14px;
+		height: 14px;
+		border: none;
+		background: none;
+		color: var(--muted-foreground);
+		font-size: 12px;
+		cursor: pointer;
+		padding: 0;
+		border-radius: 2px;
+		opacity: 0;
+		transition:
+			opacity 0.15s,
+			color 0.15s;
+	}
+
+	.inline-object-chip:hover .inline-object-delete {
+		opacity: 1;
+	}
+
+	.inline-object-delete:hover {
+		color: var(--destructive);
+	}
+</style>

package/dist/components/admin/fields/richtext/PortableTextInlineView.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    type: string;
+    nodeKey: string;
+    data: Record<string, unknown>;
+    selected: boolean;
+    onEdit: () => void;
+    onDelete: () => void;
+}
+declare const PortableTextInlineView: import("svelte").Component<Props, {}, "">;
+type PortableTextInlineView = ReturnType<typeof PortableTextInlineView>;
+export default PortableTextInlineView;
+//# sourceMappingURL=PortableTextInlineView.svelte.d.ts.map

package/dist/components/admin/fields/richtext/PortableTextInlineView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortableTextInlineView.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/admin/fields/richtext/PortableTextInlineView.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AA2BF,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Pencil, Trash2 } from '@lucide/svelte';
+
+	interface Props {
+		type: string;
+		nodeKey: string;
+		data: Record<string, unknown>;
+		selected?: boolean;
+		onEdit: () => void;
+		onDelete: () => void;
+	}
+
+	let { type, data, selected = false, onEdit, onDelete }: Props = $props();
+
+	const title = $derived((data.title as string) || (data.name as string) || type);
+
+	const subtitle = $derived.by(() => {
+		const preview: string[] = [];
+		for (const [key, val] of Object.entries(data)) {
+			if (key.startsWith('_') || key === 'title' || key === 'name') continue;
+			if (typeof val === 'string' && val.length > 0) {
+				preview.push(val.length > 40 ? val.slice(0, 40) + '...' : val);
+				if (preview.length >= 2) break;
+			}
+		}
+		return preview.join(' - ');
+	});
+</script>
+
+<div
+	class="border-rule bg-muted/20 hover:bg-muted/40 group my-2 flex items-center gap-2 rounded-md border px-3 py-2 transition-colors"
+	class:ring-primary={selected}
+	class:ring-2={selected}
+>
+	<button type="button" class="flex min-w-0 flex-1 items-center gap-3 text-left" onclick={onEdit}>
+		<div
+			class="bg-muted text-muted-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded text-xs font-medium uppercase"
+		>
+			{type.slice(0, 2)}
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="text-foreground text-sm font-medium capitalize">{title}</div>
+			{#if subtitle}
+				<div class="text-muted-foreground truncate text-xs">{subtitle}</div>
+			{/if}
+		</div>
+	</button>
+
+	<div class="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+		<button
+			type="button"
+			class="text-muted-foreground hover:text-foreground rounded p-1 transition-colors"
+			onclick={onEdit}
+			title="Edit"
+		>
+			<Pencil class="h-3.5 w-3.5" />
+		</button>
+		<button
+			type="button"
+			class="text-muted-foreground hover:text-destructive rounded p-1 transition-colors"
+			onclick={onDelete}
+			title="Remove"
+		>
+			<Trash2 class="h-3.5 w-3.5" />
+		</button>
+	</div>
+</div>