@aphexcms/cms-core 9.2.0 → 9.2.2

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

@@ -211,21 +211,25 @@
 		assetData?.originalFilename || assetData?.filename || value?.asset?._ref || 'Image'
 	);
 
-	// Alt text — stored on the asset record, not on the ImageValue
-	let altText = $state('');
-	let altSaveTimer: ReturnType<typeof setTimeout> | null = null;
-
-	// Sync altText from asset data when it loads
+	// Two layers of alt text:
+	//  • Default — stored on the ASSET, shared across every placement. Set it once and
+	//    it applies everywhere the image is used.
+	//  • Override — stored on THIS image value, for when one spot needs a different
+	//    description. Render precedence is `value.alt || asset.alt`.
+	// The override is also what carries visual-editing stega.
+	let assetAltText = $state('');
+	let assetAltTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// Sync the default from the loaded asset record.
 	$effect(() => {
-		altText = assetData?.alt || '';
+		assetAltText = assetData?.alt || '';
 	});
 
-	function updateAltText(newAlt: string) {
-		altText = newAlt;
-
-		// Debounce the API call
-		if (altSaveTimer) clearTimeout(altSaveTimer);
-		altSaveTimer = setTimeout(async () => {
+	function updateAssetAlt(newAlt: string) {
+		assetAltText = newAlt;
+		// Debounce the asset-update API call.
+		if (assetAltTimer) clearTimeout(assetAltTimer);
+		assetAltTimer = setTimeout(async () => {
 			const assetId = value?.asset?._ref;
 			if (!assetId) return;
 			try {
@@ -236,6 +240,17 @@
 		}, 800);
 	}
 
+	function updateOverrideAlt(newAlt: string) {
+		if (!value) return;
+		onUpdate({ ...value, alt: newAlt || undefined });
+	}
+
+	// Whether to reveal the per-placement override input.
+	let showOverride = $state(false);
+	$effect(() => {
+		if (value?.alt) showOverride = true;
+	});
+
 	// Download image
 	function downloadImage() {
 		if (previewUrl) {
@@ -272,7 +287,7 @@
 				{:else if previewUrl}
 					<img
 						src={previewUrl}
-						alt={assetData?.alt || displayName}
+						alt={value?.alt || assetData?.alt || displayName}
 						class="h-full w-full object-cover"
 						loading="lazy"
 					/>
@@ -299,7 +314,7 @@
 				{:else if previewUrl}
 					<img
 						src={previewUrl}
-						alt={assetData?.alt || displayName}
+						alt={value?.alt || assetData?.alt || displayName}
 						class="h-full w-full object-cover"
 						loading="lazy"
 					/>
@@ -389,7 +404,7 @@
 					{:else if previewUrl}
 						<img
 							src={previewUrl}
-							alt={assetData?.alt || 'Uploaded image'}
+							alt={value?.alt || assetData?.alt || 'Uploaded image'}
 							class="h-full w-full object-contain"
 							loading="lazy"
 						/>
@@ -453,18 +468,61 @@
 				{/if}
 			</div>
 
-			<!-- Alt text field -->
-			<div class="border-border space-y-1.5 border-t p-3">
-				<label class="text-sm font-medium" for="alt-{field.name}">Alt text</label>
-				<p class="text-muted-foreground text-xs">Describe the image for accessibility and SEO</p>
-				<Input
-					id="alt-{field.name}"
-					type="text"
-					placeholder="Describe this image..."
-					value={altText}
-					oninput={(e) => updateAltText(e.currentTarget.value)}
-					disabled={isReadOnly}
-				/>
+			<!-- Alt text — asset-level default + optional per-placement override -->
+			<div class="border-border space-y-2 border-t p-3">
+				<div class="space-y-1.5">
+					<label class="text-sm font-medium" for="alt-{field.name}">Alt text</label>
+					<p class="text-muted-foreground text-xs">
+						Describes the image everywhere it's used (accessibility &amp; SEO).
+					</p>
+					<Input
+						id="alt-{field.name}"
+						type="text"
+						placeholder="Describe this image..."
+						value={assetAltText}
+						oninput={(e) => updateAssetAlt(e.currentTarget.value)}
+						disabled={isReadOnly}
+					/>
+				</div>
+
+				{#if showOverride}
+					<div class="space-y-1.5">
+						<div class="flex items-center justify-between">
+							<label
+								class="text-muted-foreground text-xs font-medium"
+								for="alt-override-{field.name}">Override for this placement</label
+							>
+							{#if !isReadOnly}
+								<button
+									type="button"
+									class="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline"
+									onclick={() => {
+										updateOverrideAlt('');
+										showOverride = false;
+									}}
+								>
+									Hide
+								</button>
+							{/if}
+						</div>
+						<Input
+							id="alt-override-{field.name}"
+							type="text"
+							placeholder={assetAltText || 'Describe this image...'}
+							value={value?.alt ?? ''}
+							oninput={(e) => updateOverrideAlt(e.currentTarget.value)}
+							disabled={isReadOnly}
+						/>
+					</div>
+				{:else if !isReadOnly}
+					<button
+						type="button"
+						class="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline"
+						onclick={() => (showOverride = true)}
+					>
+						+ Override for this placement
+					</button>
+				{/if}
 			</div>
 		</div>
 	{:else}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ImageField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAmB1E,UAAU,KAAK;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA4cF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ImageField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ImageField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAmB1E,UAAU,KAAK;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAofF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Input } from '@aphexcms/ui/shadcn/input';
-	import type { Field } from '../../../types/schemas';
+	import { Slider } from '@aphexcms/ui/shadcn/slider';
+	import type { NumberField } from '../../../types/schemas';
 
 	interface Props {
-		field: Field;
+		field: NumberField;
 		value: number | null;
 		onUpdate: (value: number | null) => void;
 		validationClasses?: string;
@@ -22,6 +23,15 @@
 		readonly = false
 	}: Props = $props();
 
+	// --- Slider mode ---------------------------------------------------------------
+	const asSlider = $derived(field.options?.layout === 'slider');
+	const sliderMin = $derived(field.min ?? 0);
+	const sliderMax = $derived(field.max ?? 100);
+	const sliderStep = $derived(field.step ?? 1);
+	const unit = $derived(field.options?.unit ?? '');
+	// The slider always needs a concrete position; fall back to the min when unset.
+	const sliderValue = $derived(value ?? sliderMin);
+
 	// Convert value to string for input, handle null/undefined
 	let inputValue = $derived(value?.toString() || '');
 
@@ -33,8 +43,10 @@
 		if (newValue === '') {
 			onUpdate(null);
 		} else {
-			const numValue = parseFloat(newValue);
+			let numValue = parseFloat(newValue);
 			if (!isNaN(numValue)) {
+				// In slider mode the value is bounded, so clamp typed input to the range.
+				if (asSlider) numValue = Math.min(sliderMax, Math.max(sliderMin, numValue));
 				onUpdate(numValue);
 			}
 		}
@@ -67,16 +79,49 @@
 	}
 </script>
 
-<Input
-	id={field.name}
-	type="number"
-	step="any"
-	placeholder={field.description || `Enter ${field.title?.toLowerCase() || 'number'}`}
-	value={inputValue}
-	oninput={handleInput}
-	onkeydown={handleKeydown}
-	onblur={onBlur}
-	onfocus={onFocus}
-	class={validationClasses}
-	disabled={readonly}
-/>
+{#if asSlider}
+	<div class="flex items-center gap-3" class:opacity-60={readonly}>
+		<Slider
+			type="single"
+			value={sliderValue}
+			onValueChange={(v) => onUpdate(v)}
+			min={sliderMin}
+			max={sliderMax}
+			step={sliderStep}
+			disabled={readonly}
+			class="flex-1"
+		/>
+		<div class="flex shrink-0 items-center gap-1.5">
+			<Input
+				type="number"
+				min={sliderMin}
+				max={sliderMax}
+				step={sliderStep}
+				value={inputValue}
+				oninput={handleInput}
+				onkeydown={handleKeydown}
+				onblur={onBlur}
+				onfocus={onFocus}
+				class="h-8 w-16 text-sm tabular-nums {validationClasses ?? ''}"
+				disabled={readonly}
+			/>
+			{#if unit}<span class="text-muted-foreground text-sm">{unit}</span>{/if}
+		</div>
+	</div>
+{:else}
+	<Input
+		id={field.name}
+		type="number"
+		step={field.step ?? 'any'}
+		min={field.min}
+		max={field.max}
+		placeholder={field.description || `Enter ${field.title?.toLowerCase() || 'number'}`}
+		value={inputValue}
+		oninput={handleInput}
+		onkeydown={handleKeydown}
+		onblur={onBlur}
+		onfocus={onFocus}
+		class={validationClasses}
+		disabled={readonly}
+	/>
+{/if}

package/dist/components/admin/fields/NumberField.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Field } from '../../../types/schemas.js';
+import type { NumberField } from '../../../types/schemas.js';
 interface Props {
-    field: Field;
+    field: NumberField;
     value: number | null;
     onUpdate: (value: number | null) => void;
     validationClasses?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"NumberField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/NumberField.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAGnD,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAiEF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/NumberField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGzD,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAuFF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -2,6 +2,7 @@
 	import { Input } from '@aphexcms/ui/shadcn/input';
 	import * as Select from '@aphexcms/ui/shadcn/select';
 	import * as RadioGroup from '@aphexcms/ui/shadcn/radio-group';
+	import * as Tabs from '@aphexcms/ui/shadcn/tabs';
 	import { Label } from '@aphexcms/ui/shadcn/label';
 	import type { StringField, DependentList } from '../../../types/schemas';
 	import { cmsLogger } from '../../../utils/logger';
@@ -69,10 +70,12 @@
 		return '';
 	});
 
-	// Normalize list items to { title, value } format
+	// Normalize list items to a uniform { title, value, icon } shape (icon may be undefined).
 	const listItems = $derived(
 		resolvedList().map((item) =>
-			typeof item === 'string' ? { title: item.toUpperCase(), value: item } : item
+			typeof item === 'string'
+				? { title: item.toUpperCase(), value: item, icon: undefined }
+				: { title: item.title, value: item.value, icon: item.icon }
 		)
 	);
 
@@ -144,6 +147,27 @@
 				{/each}
 			</div>
 		</RadioGroup.Root>
+	{:else if layout === 'tabs'}
+		<!-- Segmented / tabs layout — icon-friendly (alignment-style pickers). -->
+		<Tabs.Root
+			value={value || ''}
+			onValueChange={(v) => v && handleSelectChange(v)}
+			class={validationClasses}
+		>
+			<Tabs.List>
+				{#each listItems as item (item.value)}
+					{@const Icon = item.icon}
+					<Tabs.Trigger value={item.value} disabled={readonly} title={item.title}>
+						{#if Icon}
+							<Icon class="size-4" />
+							<span class="sr-only">{item.title}</span>
+						{:else}
+							{item.title}
+						{/if}
+					</Tabs.Trigger>
+				{/each}
+			</Tabs.List>
+		</Tabs.Root>
 	{:else}
 		<!-- Dropdown/Select Layout -->
 		<Select.Root

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

@@ -1 +1 @@
-{"version":3,"file":"StringField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/StringField.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,wBAAwB,CAAC;AAIxE,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA+JF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StringField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/StringField.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,wBAAwB,CAAC;AAIxE,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAmLF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Input } from '@aphexcms/ui/shadcn/input';
+	import { Image as ImageIcon, Upload, Trash2, X } from '@lucide/svelte';
+	import { assets } from '../../../../api/assets';
+
+	interface Props {
+		open: boolean;
+		assetRef?: string;
+		alt: string;
+		readonly?: boolean;
+		onAltChange: (alt: string) => void;
+		onReplace: () => void;
+		onRemove: () => void;
+		onClose: () => void;
+	}
+
+	let {
+		open,
+		assetRef,
+		alt,
+		readonly = false,
+		onAltChange,
+		onReplace,
+		onRemove,
+		onClose
+	}: Props = $props();
+
+	const assetPromise = $derived(assetRef ? assets.getById(assetRef) : null);
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) onClose();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') onClose();
+	}
+</script>
+
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="bg-background/80 absolute inset-0 z-50 flex items-center justify-center p-4 lg:p-6"
+		onclick={handleBackdropClick}
+		onkeydown={handleKeydown}
+		role="button"
+		tabindex="-1"
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="border-border bg-background w-full max-w-lg overflow-hidden rounded-lg border shadow-lg"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+		>
+			<div class="border-border flex items-center justify-between border-b px-4 py-2">
+				<span class="text-sm font-medium">Edit image</span>
+				<Button variant="ghost" size="icon" class="h-7 w-7" onclick={onClose}>
+					<X class="h-3.5 w-3.5" />
+				</Button>
+			</div>
+
+			<div class="space-y-3 p-4">
+				<!-- Preview -->
+				<div
+					class="bg-muted flex items-center justify-center overflow-hidden rounded-md"
+					style="aspect-ratio: 16 / 9;"
+				>
+					{#if assetPromise}
+						{#await assetPromise}
+							<div
+								class="border-primary h-5 w-5 animate-spin rounded-full border-2 border-t-transparent"
+							></div>
+						{:then result}
+							{#if result.success && result.data?.url}
+								<img src={result.data.url} {alt} class="h-full w-full object-contain" />
+							{:else}
+								<div class="text-muted-foreground flex flex-col items-center gap-1">
+									<ImageIcon class="h-8 w-8" />
+									<span class="text-xs">Image not found</span>
+								</div>
+							{/if}
+						{:catch}
+							<div class="text-muted-foreground flex flex-col items-center gap-1">
+								<ImageIcon class="h-8 w-8" />
+								<span class="text-xs">Failed to load</span>
+							</div>
+						{/await}
+					{:else}
+						<div class="text-muted-foreground flex flex-col items-center gap-1">
+							<ImageIcon class="h-8 w-8" />
+							<span class="text-xs">No image</span>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Alt text (per-placement override of the asset's default alt) -->
+				<div class="space-y-1.5">
+					<label class="text-sm font-medium" for="image-block-alt">Alt text</label>
+					<p class="text-muted-foreground text-xs">
+						Overrides the image's default alt for this spot. Leave blank to use the default.
+					</p>
+					<Input
+						id="image-block-alt"
+						type="text"
+						placeholder="Describe this image..."
+						value={alt}
+						oninput={(e) => onAltChange(e.currentTarget.value)}
+						disabled={readonly}
+					/>
+				</div>
+
+				<!-- Actions -->
+				{#if !readonly}
+					<div class="flex items-center justify-between gap-2 pt-1">
+						<Button variant="outline" size="sm" onclick={onReplace}>
+							<Upload class="mr-1.5 h-4 w-4" />
+							Replace
+						</Button>
+						<Button
+							variant="ghost"
+							size="sm"
+							class="text-destructive hover:text-destructive"
+							onclick={onRemove}
+						>
+							<Trash2 class="mr-1.5 h-4 w-4" />
+							Remove
+						</Button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,14 @@
+interface Props {
+    open: boolean;
+    assetRef?: string;
+    alt: string;
+    readonly?: boolean;
+    onAltChange: (alt: string) => void;
+    onReplace: () => void;
+    onRemove: () => void;
+    onClose: () => void;
+}
+declare const ImageBlockModal: import("svelte").Component<Props, {}, "">;
+type ImageBlockModal = ReturnType<typeof ImageBlockModal>;
+export default ImageBlockModal;
+//# sourceMappingURL=ImageBlockModal.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBlockModal.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/admin/fields/richtext/ImageBlockModal.svelte.ts"],"names":[],"mappings":"AASC,UAAU,KAAK;IACd,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAoGF,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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

@@ -19,7 +19,7 @@
 
 <!-- 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}>
+<div class="image-block-view group" class:selected data-pt-image-edit onclick={onEdit}>
 	{#if assetPromise}
 		{#await assetPromise}
 			<div class="image-block-placeholder">
@@ -29,7 +29,7 @@
 			</div>
 		{:then result}
 			{#if result.success && result.data?.url}
-				<img src={result.data.url} alt={result.data.alt || ''} class="image-block-img" />
+				<img src={result.data.url} alt={(data?.alt as string) || ''} class="image-block-img" />
 			{:else}
 				<div class="image-block-placeholder">
 					<ImageIcon class="text-muted-foreground h-8 w-8" />