@aphexcms/cms-core 2.0.9 → 2.0.11

package/dist/components/admin/PermissionsDebug.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { Shield, X, Copy } from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Badge } from '@aphexcms/ui/shadcn/badge';
+	import { usePermissions } from '../../permissions-context.svelte';
+
+	/**
+	 * A floating dev panel that surfaces the caller's resolved RBAC state so
+	 * you can see exactly what the client thinks you can do. Mirrors the
+	 * server-side capability set hydrated by the auth hook.
+	 *
+	 * Mount once near the root of your admin layout. Hidden by default —
+	 * clicking the shield toggles the panel open.
+	 */
+
+	const perms = usePermissions();
+	let open = $state(false);
+
+	const capabilities = $derived([...perms.capabilities].sort());
+	const grouped = $derived.by(() => {
+		const groups = new Map<string, string[]>();
+		for (const cap of capabilities) {
+			const prefix = cap.includes('.') ? (cap.split('.')[0] ?? 'other') : 'other';
+			if (!groups.has(prefix)) groups.set(prefix, []);
+			groups.get(prefix)!.push(cap);
+		}
+		return Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+	});
+
+	async function copyJSON() {
+		const payload = {
+			role: perms.role,
+			capabilities
+		};
+		try {
+			await navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
+			toast.success('Copied RBAC snapshot');
+		} catch {
+			toast.error('Copy failed');
+		}
+	}
+</script>
+
+{#if open}
+	<div
+		class="bg-background fixed right-4 bottom-4 z-50 w-80 overflow-hidden rounded-lg border shadow-lg"
+		role="dialog"
+		aria-label="Permissions debug"
+	>
+		<div class="border-b px-3 py-2">
+			<div class="flex items-center justify-between gap-2">
+				<div class="flex items-center gap-2">
+					<Shield class="h-3.5 w-3.5" />
+					<span class="text-sm font-semibold">RBAC</span>
+				</div>
+				<div class="flex items-center gap-1">
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-6 w-6 p-0"
+						onclick={copyJSON}
+						title="Copy JSON"
+					>
+						<Copy class="h-3 w-3" />
+					</Button>
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-6 w-6 p-0"
+						onclick={() => (open = false)}
+						title="Close"
+					>
+						<X class="h-3 w-3" />
+					</Button>
+				</div>
+			</div>
+			<div class="mt-1 flex items-center gap-1.5 text-xs">
+				<span class="text-muted-foreground">role:</span>
+				{#if perms.role}
+					<Badge variant="secondary" class="text-[10px]">{perms.role}</Badge>
+				{:else}
+					<span class="text-muted-foreground italic">none</span>
+				{/if}
+			</div>
+		</div>
+
+		<div class="max-h-80 space-y-3 overflow-y-auto p-3">
+			{#if capabilities.length === 0}
+				<p class="text-muted-foreground py-4 text-center text-xs">No capabilities granted.</p>
+			{:else}
+				{#each grouped as [prefix, caps] (prefix)}
+					<div class="space-y-1">
+						<p class="text-muted-foreground text-[10px] font-semibold tracking-wider uppercase">
+							{prefix}
+						</p>
+						<div class="flex flex-wrap gap-1">
+							{#each caps as cap (cap)}
+								<Badge variant="outline" class="font-mono text-[10px]">
+									{cap.split('.').slice(1).join('.') || cap}
+								</Badge>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			{/if}
+		</div>
+	</div>
+{:else}
+	<button
+		type="button"
+		onclick={() => (open = true)}
+		class="bg-background hover:bg-muted fixed right-4 bottom-4 z-50 flex h-9 w-9 items-center justify-center rounded-full border shadow-sm transition-colors"
+		title="Show permissions"
+		aria-label="Show permissions debug"
+	>
+		<Shield class="h-4 w-4" />
+	</button>
+{/if}

package/dist/components/admin/PermissionsDebug.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const PermissionsDebug: import("svelte").Component<Record<string, never>, {}, "">;
+type PermissionsDebug = ReturnType<typeof PermissionsDebug>;
+export default PermissionsDebug;
+//# sourceMappingURL=PermissionsDebug.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionsDebug.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/PermissionsDebug.svelte.ts"],"names":[],"mappings":"AA6GA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/admin/SchemaField.svelte

@@ -264,7 +264,9 @@
 				<p class="text-destructive text-sm font-medium">
 					Failed to render field "{field.name}" ({field.type})
 				</p>
-				<p class="text-muted-foreground mt-1 text-xs">{error instanceof Error ? error.message : 'Unknown error'}</p>
+				<p class="text-muted-foreground mt-1 text-xs">
+					{error instanceof Error ? error.message : 'Unknown error'}
+				</p>
 				<button class="text-primary mt-2 text-xs underline" onclick={reset}> Try again </button>
 			</div>
 		{/snippet}

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

@@ -1 +1 @@
-{"version":3,"file":"SchemaField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/SchemaField.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,KAAK,EAGL,MAAM,qBAAqB,CAAC;AAyB9B,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG9C,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,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,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA2NF,QAAA,MAAM,WAAW;sCA7KgC,GAAG,YAAW,GAAG;MA6KT,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SchemaField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/SchemaField.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,KAAK,EAGL,MAAM,qBAAqB,CAAC;AAyB9B,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG9C,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,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,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA6NF,QAAA,MAAM,WAAW;sCA/KgC,GAAG,YAAW,GAAG;MA+KT,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/admin/confirm-dialog/ConfirmDialogHost.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import * as AlertDialog from '@aphexcms/ui/shadcn/alert-dialog';
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { confirmDialogState, resolveConfirmDialog } from './confirm-dialog.svelte';
+
+	function handleOpenChange(open: boolean) {
+		if (!open && confirmDialogState.open) {
+			resolveConfirmDialog(false);
+		}
+	}
+</script>
+
+<AlertDialog.Root bind:open={confirmDialogState.open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="break-words">{confirmDialogState.title}</AlertDialog.Title>
+			{#if confirmDialogState.description}
+				<AlertDialog.Description class="break-words">
+					{confirmDialogState.description}
+				</AlertDialog.Description>
+			{/if}
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<Button variant="outline" onclick={() => resolveConfirmDialog(false)}>
+				{confirmDialogState.cancelText}
+			</Button>
+			<Button
+				variant={confirmDialogState.variant === 'destructive' ? 'destructive' : 'default'}
+				onclick={() => resolveConfirmDialog(true)}
+			>
+				{confirmDialogState.confirmText}
+			</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/dist/components/admin/confirm-dialog/ConfirmDialogHost.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConfirmDialogHost: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConfirmDialogHost = InstanceType<typeof ConfirmDialogHost>;
+export default ConfirmDialogHost;
+//# sourceMappingURL=ConfirmDialogHost.svelte.d.ts.map

package/dist/components/admin/confirm-dialog/ConfirmDialogHost.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialogHost.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/confirm-dialog/ConfirmDialogHost.svelte.ts"],"names":[],"mappings":"AA0CA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,iBAAiB;;kBAA+E,CAAC;AACrF,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/components/admin/confirm-dialog/confirm-dialog.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface ConfirmDialogOptions {
+    title: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'default' | 'destructive';
+}
+interface ConfirmDialogState extends ConfirmDialogOptions {
+    open: boolean;
+    resolve: ((value: boolean) => void) | null;
+}
+export declare const confirmDialogState: ConfirmDialogState;
+export declare function confirmDialog(options: ConfirmDialogOptions): Promise<boolean>;
+export declare function resolveConfirmDialog(value: boolean): void;
+export {};
+//# sourceMappingURL=confirm-dialog.svelte.d.ts.map

package/dist/components/admin/confirm-dialog/confirm-dialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/confirm-dialog/confirm-dialog.svelte.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACpC;AAED,UAAU,kBAAmB,SAAQ,oBAAoB;IACxD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,kBAAkB,oBAQ7B,CAAC;AAEH,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CAAC,OAAO,CAAC,CAa7E;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,QAKlD"}

package/dist/components/admin/confirm-dialog/confirm-dialog.svelte.js

@@ -0,0 +1,29 @@
+export const confirmDialogState = $state({
+    open: false,
+    title: '',
+    description: undefined,
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
+    variant: 'default',
+    resolve: null
+});
+export function confirmDialog(options) {
+    return new Promise((resolve) => {
+        if (confirmDialogState.resolve) {
+            confirmDialogState.resolve(false);
+        }
+        confirmDialogState.title = options.title;
+        confirmDialogState.description = options.description;
+        confirmDialogState.confirmText = options.confirmText ?? 'Confirm';
+        confirmDialogState.cancelText = options.cancelText ?? 'Cancel';
+        confirmDialogState.variant = options.variant ?? 'default';
+        confirmDialogState.resolve = resolve;
+        confirmDialogState.open = true;
+    });
+}
+export function resolveConfirmDialog(value) {
+    const r = confirmDialogState.resolve;
+    confirmDialogState.resolve = null;
+    confirmDialogState.open = false;
+    r?.(value);
+}

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

@@ -342,7 +342,11 @@
 			});
 		}
 
-		editingIndex = arrayValue.length;
+		// Add to array immediately so document auto-save captures it
+		const newArray = [...keyedItems, newItem];
+		onUpdate(newArray);
+
+		editingIndex = newArray.length - 1;
 		editingType = selectedType;
 		editingSchema = schema;
 		editingValue = newItem;
@@ -369,32 +373,22 @@
 		onUpdate(newArray);
 	}
 
-	function handleModalSave(editedData: Record<string, any>) {
+	// Write-through: propagate every field change from the modal to the array immediately
+	function handleModalUpdate(updatedData: Record<string, any>) {
 		if (editingIndex === null || !editingType) return;
 
-		const itemData: Record<string, any> = { ...editedData, _type: editingType };
-		// Preserve _key if editing existing item
-		if ((editingValue as any)._key) {
-			itemData._key = (editingValue as any)._key;
+		const itemData: Record<string, any> = { ...updatedData, _type: editingType };
+		if (editingValue._key) {
+			itemData._key = editingValue._key;
 		} else {
 			itemData._key = generateKey();
 		}
 
-		const newArray = [...keyedItems];
-
-		if (editingIndex >= newArray.length) {
-			newArray.push(itemData);
-		} else {
-			newArray[editingIndex] = itemData;
-		}
+		editingValue = itemData;
 
+		const newArray = [...keyedItems];
+		newArray[editingIndex] = itemData;
 		onUpdate(newArray);
-
-		modalOpen = false;
-		editingIndex = null;
-		editingType = null;
-		editingSchema = null;
-		editingValue = {};
 	}
 
 	function handleModalClose() {
@@ -440,9 +434,11 @@
 				{#if isGridLayout}
 					<!-- Grid layout for images -->
 					{#if arrayValue.length === 0}
-						<div class="border-border/50 flex h-32 items-center justify-center rounded-md border border-dashed">
+						<div
+							class="border-border/50 flex h-32 items-center justify-center rounded-md border border-dashed"
+						>
 							<div class="text-center">
-								<ImageIcon class="mx-auto h-8 w-8 text-muted-foreground" />
+								<ImageIcon class="text-muted-foreground mx-auto h-8 w-8" />
 								<p class="text-muted-foreground mt-1 text-xs">No images yet</p>
 							</div>
 						</div>
@@ -455,18 +451,16 @@
 								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 -->
-								<!-- 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)}
 								>
 									{#if item?.asset?._ref}
 										{#await assets.getById(item.asset._ref)}
-											<div class="flex h-full w-full items-center justify-center bg-muted">
-												<div class="border-primary h-4 w-4 animate-spin rounded-full border-b-2"></div>
+											<div class="bg-muted flex h-full w-full items-center justify-center">
+												<div
+													class="border-primary h-4 w-4 animate-spin rounded-full border-b-2"
+												></div>
 											</div>
 										{:then result}
 											{#if result.success && result.data?.url}
@@ -477,40 +471,41 @@
 													loading="lazy"
 												/>
 											{:else}
-												<div class="flex h-full w-full items-center justify-center bg-muted">
-													<ImageIcon class="h-8 w-8 text-muted-foreground" />
+												<div class="bg-muted flex h-full w-full items-center justify-center">
+													<ImageIcon class="text-muted-foreground h-8 w-8" />
 												</div>
 											{/if}
 										{:catch}
-											<div class="flex h-full w-full items-center justify-center bg-muted">
-												<ImageIcon class="h-8 w-8 text-muted-foreground" />
+											<div class="bg-muted flex h-full w-full items-center justify-center">
+												<ImageIcon class="text-muted-foreground h-8 w-8" />
 											</div>
 										{/await}
 									{:else}
-										<div class="flex h-full w-full items-center justify-center bg-muted">
-											<ImageIcon class="h-8 w-8 text-muted-foreground" />
+										<div class="bg-muted flex h-full w-full items-center justify-center">
+											<ImageIcon class="text-muted-foreground h-8 w-8" />
 										</div>
 									{/if}
 								</div>
 
 								<!-- Overlay controls -->
 								{#if !readonly}
-									<div class="absolute top-1 left-1 opacity-0 group-hover:opacity-100 transition-opacity">
+									<div
+										class="absolute top-1 left-1 opacity-0 transition-opacity group-hover:opacity-100"
+									>
 										<button
 											{@attach sortable.attachHandle}
-											class="bg-background/80 rounded p-1 cursor-grab active:cursor-grabbing"
+											class="bg-background/80 cursor-grab rounded p-1 active:cursor-grabbing"
 										>
 											<GripVertical class="h-3.5 w-3.5" />
 										</button>
 									</div>
-									<div class="absolute right-1 bottom-1 opacity-0 group-hover:opacity-100 transition-opacity">
+									<div
+										class="absolute right-1 bottom-1 opacity-0 transition-opacity group-hover:opacity-100"
+									>
 										<DropdownMenu.Root>
 											<DropdownMenu.Trigger>
 												{#snippet child({ props })}
-													<button
-														{...props}
-														class="bg-background/80 rounded p-1"
-													>
+													<button {...props} class="bg-background/80 rounded p-1">
 														<Ellipsis class="h-3.5 w-3.5" />
 													</button>
 												{/snippet}
@@ -534,76 +529,74 @@
 						{/each}
 					</div>
 				{:else}
-				<!-- Default list layout for images -->
-				<div class="space-y-1">
-					{#each arrayValue as item, index (`prim-${index}`)}
-						{@const sortable = createSortable({ id: `prim-${index}`, index, disabled: readonly })}
-						<div
-							{@attach sortable.attach}
-							class="border-border/50 bg-background hover:bg-muted/50 flex h-16 items-center gap-1 rounded border px-1 transition-colors"
-							class:opacity-50={sortable.isDragging}
-						>
-							{#if !readonly}
-								<button
-									{@attach sortable.attachHandle}
-									class="text-muted-foreground hover:text-foreground flex h-8 w-6 cursor-grab items-center justify-center active:cursor-grabbing"
-								>
-									<GripVertical class="h-4 w-4" />
-								</button>
-							{/if}
-
-							<!-- svelte-ignore a11y_click_events_have_key_events -->
-							<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<!-- Default list layout for images -->
+					<div class="space-y-1">
+						{#each arrayValue as item, index (`prim-${index}`)}
+							{@const sortable = createSortable({ id: `prim-${index}`, index, disabled: readonly })}
 							<div
-								class="min-w-0 flex-1 cursor-pointer text-left"
-								onclick={() => handleOpenImageModal(index)}
+								{@attach sortable.attach}
+								class="border-border/50 bg-background hover:bg-muted/50 flex h-16 items-center gap-1 rounded border px-1 transition-colors"
+								class:opacity-50={sortable.isDragging}
 							>
-								<ImageField
-									field={{
-										...field.of?.[0],
-										name: `image-${index}`,
-										type: 'image',
-										title: `Image ${index + 1}`
-									}}
-									value={item}
-									onUpdate={() => {}}
-									{readonly}
-									arrayItem={true}
-									{organizationId}
-								/>
-							</div>
+								{#if !readonly}
+									<button
+										{@attach sortable.attachHandle}
+										class="text-muted-foreground hover:text-foreground flex h-8 w-6 cursor-grab items-center justify-center active:cursor-grabbing"
+									>
+										<GripVertical class="h-4 w-4" />
+									</button>
+								{/if}
 
-							{#if !readonly}
-								<DropdownMenu.Root>
-									<DropdownMenu.Trigger>
-										{#snippet child({ props })}
-											<button
-												{...props}
-												class="text-muted-foreground hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded transition-colors hover:bg-transparent"
+								<div
+									class="min-w-0 flex-1 cursor-pointer text-left"
+									onclick={() => handleOpenImageModal(index)}
+								>
+									<ImageField
+										field={{
+											...field.of?.[0],
+											name: `image-${index}`,
+											type: 'image',
+											title: `Image ${index + 1}`
+										}}
+										value={item}
+										onUpdate={() => {}}
+										{readonly}
+										arrayItem={true}
+										{organizationId}
+									/>
+								</div>
+
+								{#if !readonly}
+									<DropdownMenu.Root>
+										<DropdownMenu.Trigger>
+											{#snippet child({ props })}
+												<button
+													{...props}
+													class="text-muted-foreground hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded transition-colors hover:bg-transparent"
+												>
+													<Ellipsis class="h-4 w-4" />
+												</button>
+											{/snippet}
+										</DropdownMenu.Trigger>
+										<DropdownMenu.Content align="end">
+											<DropdownMenu.Item onclick={() => handleOpenImageModal(index)}>
+												<Pencil class="mr-2 h-4 w-4" />
+												Edit
+											</DropdownMenu.Item>
+											<DropdownMenu.Separator />
+											<DropdownMenu.Item
+												class="text-destructive focus:text-destructive"
+												onclick={() => handleRemoveItem(index)}
 											>
-												<Ellipsis class="h-4 w-4" />
-											</button>
-										{/snippet}
-									</DropdownMenu.Trigger>
-									<DropdownMenu.Content align="end">
-										<DropdownMenu.Item onclick={() => handleOpenImageModal(index)}>
-											<Pencil class="mr-2 h-4 w-4" />
-											Edit
-										</DropdownMenu.Item>
-										<DropdownMenu.Separator />
-										<DropdownMenu.Item
-											class="text-destructive focus:text-destructive"
-											onclick={() => handleRemoveItem(index)}
-										>
-											<Trash2 class="mr-2 h-4 w-4" />
-											Remove
-										</DropdownMenu.Item>
-									</DropdownMenu.Content>
-								</DropdownMenu.Root>
-							{/if}
-						</div>
-					{/each}
-				</div>
+												<Trash2 class="mr-2 h-4 w-4" />
+												Remove
+											</DropdownMenu.Item>
+										</DropdownMenu.Content>
+									</DropdownMenu.Root>
+								{/if}
+							</div>
+						{/each}
+					</div>
 				{/if}
 			</DragDropProvider>
 		{/key}
@@ -787,7 +780,10 @@
 							</div>
 
 							<!-- Title (clickable to edit) -->
-							<button class="flex-1 truncate text-left text-sm" onclick={() => handleEditItem(index)}>
+							<button
+								class="flex-1 cursor-pointer truncate text-left text-sm"
+								onclick={() => handleEditItem(index)}
+							>
 								{getItemTitle(item)}
 							</button>
 
@@ -869,7 +865,7 @@
 		schema={editingSchema}
 		value={editingValue}
 		onClose={handleModalClose}
-		onSave={handleModalSave}
+		onUpdate={handleModalUpdate}
 		{onOpenReference}
 		{readonly}
 		{organizationId}

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;AAyBtF,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;AAsyBF,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;AAyBtF,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;AA0xBF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}