@aphexcms/cms-core 2.0.9 → 2.0.11

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

@@ -9,6 +9,8 @@ interface Props {
     onAutoSaved?: (documentId: string, title: string) => void;
     onDeleted?: () => void;
     onPublished?: (documentId: string) => void;
+    onUnpublished?: (documentId: string) => void;
+    onRestored?: (documentId: string) => void;
     onOpenReference?: (documentId: string, documentType: string) => void;
     onOpenVersionHistory?: (documentId: string) => void;
     externalVersionPreview?: {

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/DocumentEditor.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAWxD,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,CAAC,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC5H,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAkrCF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DocumentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/DocumentEditor.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAaxD,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,CAAC,EAAE;QACxB,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,CAAC;IACT,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AA+5CF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/admin/DocumentVersionPanel.svelte

@@ -8,10 +8,18 @@
 		documentId: string;
 		onClose: () => void;
 		onRestored?: () => void;
-		onPreviewVersion?: (version: { versionNumber: number; data: Record<string, any>; eventType: string; createdAt?: string } | null) => void;
+		onPreviewVersion?: (
+			version: {
+				versionNumber: number;
+				data: Record<string, any>;
+				eventType: string;
+				createdAt?: string;
+			} | null
+		) => void;
 	}
 
 	let { documentId, onClose, onRestored, onPreviewVersion }: Props = $props();
+	void onRestored;
 
 	let versions = $state<any[]>([]);
 	let loading = $state(true);
@@ -44,61 +52,51 @@
 		try {
 			const res = await documents.getVersion(documentId, version.versionNumber);
 			if (res.success && res.data) {
-				previewVersion = { ...version, data: res.data.data };
+				previewVersion = { ...version, data: res.data.data ?? {} };
 				onPreviewVersion?.({
 					versionNumber: version.versionNumber,
-					data: res.data.data,
+					data: res.data.data ?? {},
 					eventType: version.eventType,
-					createdAt: version.createdAt
+					createdAt: version.createdAt ?? undefined
 				});
 			}
 		} catch {
 			toast.error('Failed to load version');
 		}
 	}
-
-	function clearPreview() {
-		previewVersion = null;
-		onPreviewVersion?.(null);
-	}
-
-	async function restoreVersion() {
-		if (!previewVersion) return;
-		try {
-			await documents.restoreVersion(documentId, previewVersion.versionNumber);
-			toast.success(`Restored to v${previewVersion.versionNumber}`);
-			clearPreview();
-			onRestored?.();
-			await loadVersions();
-		} catch {
-			toast.error('Failed to restore');
-		}
-	}
 </script>
 
 <div class="flex h-full flex-col">
 	<!-- Header -->
 	<div class="border-border bg-background flex h-14 items-center justify-between border-b px-3">
 		<h3 class="text-sm font-medium">History</h3>
-		<button
-			class="hover:bg-muted rounded p-1 transition-colors"
-			onclick={onClose}
-		>
+		<Button class="hover:bg-muted rounded p-1 transition-colors" variant="ghost" onclick={onClose}>
 			<svg class="h-4 w-4" 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" />
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
 			</svg>
-		</button>
+		</Button>
 	</div>
 
 	<!-- Filter tabs -->
 	<div class="border-border flex border-b">
 		{#each [{ value: 'all', label: 'All' }, { value: 'publish', label: 'Published' }, { value: 'draft', label: 'Drafts' }] as tab}
-			<button
-				class="flex-1 px-2 py-2 text-xs font-medium transition-colors {filter === tab.value ? 'border-b-2 border-primary text-foreground' : 'text-muted-foreground hover:text-foreground'}"
-				onclick={() => { filter = tab.value as any; }}
+			<Button
+				variant="ghost"
+				class="flex-1 cursor-pointer rounded-none px-2 py-2 text-xs font-medium transition-colors {filter ===
+				tab.value
+					? 'border-primary text-foreground border-b-2'
+					: 'text-muted-foreground hover:text-foreground'}"
+				onclick={() => {
+					filter = tab.value as any;
+				}}
 			>
 				{tab.label}
-			</button>
+			</Button>
 		{/each}
 	</div>
 
@@ -110,28 +108,43 @@
 			</div>
 		{:else if filteredVersions.length === 0}
 			<div class="p-4 text-center">
-				<span class="text-muted-foreground text-xs">No {filter === 'all' ? '' : filter} versions</span>
+				<span class="text-muted-foreground text-xs"
+					>No {filter === 'all' ? '' : filter} versions</span
+				>
 			</div>
 		{:else}
-			{#each filteredVersions as version}
-				<button
-					class="w-full border-b px-3 py-2.5 text-left transition-colors hover:bg-muted {previewVersion?.versionNumber === version.versionNumber ? 'bg-muted border-l-2 border-l-primary' : ''}"
+			{#each filteredVersions as version, i}
+				<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 ===
+					version.versionNumber
+						? 'bg-muted border-l-primary border-l-2'
+						: ''}"
 					onclick={() => previewVersionData(version)}
 				>
 					<div class="flex items-center justify-between">
 						<span class="text-muted-foreground text-[11px]">
-							{new Date(version.createdAt).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true })}
+							{new Date(version.createdAt).toLocaleString(undefined, {
+								month: 'short',
+								day: 'numeric',
+								hour: 'numeric',
+								minute: '2-digit',
+								hour12: true
+							})}
 						</span>
-						<Badge variant={version.eventType === 'publish' ? 'default' : 'secondary'} class="text-[9px] px-1.5 py-0">
+						<Badge
+							variant={version.eventType === 'publish' ? 'default' : 'secondary'}
+							class="px-1.5 py-0 text-[9px]"
+						>
 							{version.eventType}
 						</Badge>
 					</div>
-						{#if version.createdByName || version.createdBy}
-							<p class="text-muted-foreground mt-0.5 truncate text-[10px]">
-								{version.createdByName || version.createdBy}
-							</p>
-						{/if}
-				</button>
+					{#if version.createdByName}
+						<p class="text-muted-foreground mt-0.5 truncate text-[10px]">
+							{version.createdByName}
+						</p>
+					{/if}
+				</div>
 			{/each}
 		{/if}
 	</div>

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,CAAC,OAAO,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CACzI;AA+HF,QAAA,MAAM,oBAAoB,2CAAwC,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;AA4HF,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/admin/MediaBrowser.svelte

@@ -33,6 +33,8 @@
 	import { copyUrlToClipboard, downloadFile } from '../../utils/asset-actions';
 	import { cmsLogger } from '../../utils/logger';
 	import { SvelteSet } from 'svelte/reactivity';
+	import { confirmDialog } from './confirm-dialog/confirm-dialog.svelte';
+	import { usePermissions } from '../../permissions-context.svelte';
 
 	interface Props {
 		/** When true, shows a "Select" button for picking an asset */
@@ -71,6 +73,10 @@
 	let viewMode = $state<'grid' | 'list'>('grid');
 	let sortOrder = $state<'newest' | 'oldest' | 'name-asc' | 'name-desc'>('newest');
 
+	const perms = usePermissions();
+	const canUpload = $derived(perms.can('asset.upload'));
+	const canDeleteAssets = $derived(perms.can('asset.delete'));
+
 	let selectedAsset = $state<Asset | null>(null);
 	let lightboxOpen = $state(false);
 	let currentPage = $state(1);
@@ -292,7 +298,13 @@
 		}
 
 		const count = selectedIds.size;
-		if (!confirm(`Delete ${count} asset${count > 1 ? 's' : ''}? This cannot be undone.`)) return;
+		const confirmed = await confirmDialog({
+			title: `Delete ${count} asset${count > 1 ? 's' : ''}?`,
+			description: 'This cannot be undone.',
+			confirmText: 'Delete',
+			variant: 'destructive'
+		});
+		if (!confirmed) return;
 
 		isBulkDeleting = true;
 		try {
@@ -428,7 +440,13 @@
 			);
 			return;
 		}
-		if (!confirm(`Delete "${asset.originalFilename}"? This cannot be undone.`)) return;
+		const confirmed = await confirmDialog({
+			title: 'Delete asset?',
+			description: `"${asset.originalFilename}" will be permanently deleted. This cannot be undone.`,
+			confirmText: 'Delete',
+			variant: 'destructive'
+		});
+		if (!confirmed) return;
 		try {
 			const result = await assets.delete(asset.id);
 			if (result.success) {
@@ -566,16 +584,18 @@
 	<!-- Header -->
 	<div class="border-border flex items-center justify-between border-b px-4 py-3 sm:px-6 sm:py-4">
 		<h2 class="text-base font-semibold sm:text-lg">Browse Assets</h2>
-		<Button
-			size="sm"
-			onclick={() => {
-				showUploadModal = true;
-				uploadQueue = [];
-			}}
-		>
-			<Upload size={16} class="sm:mr-2" />
-			<span class="hidden sm:inline">Upload assets</span>
-		</Button>
+		{#if canUpload}
+			<Button
+				size="sm"
+				onclick={() => {
+					showUploadModal = true;
+					uploadQueue = [];
+				}}
+			>
+				<Upload size={16} class="sm:mr-2" />
+				<span class="hidden sm:inline">Upload assets</span>
+			</Button>
+		{/if}
 	</div>
 
 	<!-- Toolbar -->
@@ -641,8 +661,9 @@
 			</button>
 		</div>
 
-		<!-- Select mode toggle -->
-		{#if !selectable}
+		<!-- Select mode toggle — only useful when the user can actually act on
+		     the selection (delete). Hidden otherwise so it doesn't dead-end. -->
+		{#if !selectable && canDeleteAssets}
 			<button
 				onclick={toggleSelectMode}
 				class="rounded p-1.5 transition-colors {isSelectMode
@@ -703,15 +724,17 @@
 							<span class="text-sm font-medium">
 								{selectedIds.size} selected
 							</span>
-							<Button
-								variant="destructive"
-								size="sm"
-								onclick={bulkDelete}
-								disabled={isBulkDeleting}
-							>
-								<Trash2 size={14} class="mr-1.5" />
-								{isBulkDeleting ? 'Deleting...' : 'Delete'}
-							</Button>
+							{#if canDeleteAssets}
+								<Button
+									variant="destructive"
+									size="sm"
+									onclick={bulkDelete}
+									disabled={isBulkDeleting}
+								>
+									<Trash2 size={14} class="mr-1.5" />
+									{isBulkDeleting ? 'Deleting...' : 'Delete'}
+								</Button>
+							{/if}
 							<button
 								onclick={() => (selectedIds = new Set())}
 								class="text-muted-foreground hover:text-foreground text-sm transition-colors"
@@ -805,12 +828,25 @@
 										{#if selectable}
 											<!-- Info button to view details without selecting -->
 											<button
-												onclick={(e) => { e.stopPropagation(); openAssetDetail(asset); }}
-												class="absolute top-1.5 right-1.5 rounded bg-background/80 p-1 opacity-0 transition-opacity group-hover:opacity-100"
+												onclick={(e) => {
+													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"
 											>
-												<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+												<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+													/>
 												</svg>
 											</button>
 										{:else if isSelectMode}
@@ -1042,7 +1078,9 @@
 				{#snippet failed(error, reset)}
 					<div class="border-destructive/30 bg-destructive/5 rounded-md border p-4 text-center">
 						<p class="text-destructive font-medium">Media browser encountered an error</p>
-						<p class="text-muted-foreground mt-1 text-sm">{error instanceof Error ? error.message : 'Unknown error'}</p>
+						<p class="text-muted-foreground mt-1 text-sm">
+							{error instanceof Error ? error.message : 'Unknown error'}
+						</p>
 						<button
 							class="bg-primary text-primary-foreground mt-3 rounded px-4 py-2 text-sm"
 							onclick={reset}
@@ -1077,7 +1115,7 @@
 						{selectedAsset.originalFilename}
 					</p>
 					<div class="flex items-center gap-1">
-						{#if !selectable}
+						{#if !selectable && canDeleteAssets}
 							<Button
 								variant="ghost"
 								size="sm"
@@ -1105,7 +1143,9 @@
 						<Button
 							size="sm"
 							class="w-full"
-							onclick={() => { if (selectedAsset && onSelect) onSelect(selectedAsset); }}
+							onclick={() => {
+								if (selectedAsset && onSelect) onSelect(selectedAsset);
+							}}
 						>
 							Select
 						</Button>

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;AAO9C,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;AAmoCF,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;AAgqCF,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

@@ -1,70 +1,33 @@
 <script lang="ts">
 	import { Button } from '@aphexcms/ui/shadcn/button';
-	import * as Card from '@aphexcms/ui/shadcn/card';
 	import type { SchemaType } from '../../types/schemas.js';
 	import SchemaField from './SchemaField.svelte';
-	import { getDefaultValueForFieldType } from '../../utils/field-defaults';
+	import { getSaveStateContext } from '../../save-state-context.svelte';
+
+	const saveState = getSaveStateContext();
 
 	interface Props {
 		open: boolean;
 		schema: SchemaType;
 		value: Record<string, any>;
 		onClose: () => void;
-		onSave: (value: Record<string, any>) => void;
-		onUpdate?: (value: Record<string, any>) => void; // For real-time updates
+		onUpdate: (value: Record<string, any>) => void;
 		onOpenReference?: (documentId: string, documentType: string) => void;
 		readonly?: boolean;
-		organizationId?: string; // For asset uploads to org-specific storage
+		organizationId?: string;
 	}
 
-	// TODO: add onUpdate to auto save
 	let {
 		open,
 		schema,
 		value,
 		onClose,
-		onSave,
+		onUpdate,
 		onOpenReference,
 		readonly = false,
 		organizationId
 	}: Props = $props();
 
-	// Initialize editing data with defaults and existing values
-	function initializeData() {
-		const initialData: Record<string, any> = {};
-
-		if (schema?.fields) {
-			schema.fields.forEach((field: any) => {
-				if ('initialValue' in field && field.initialValue !== undefined) {
-					// Only use literal initialValue (skip functions to keep this synchronous)
-					if (typeof field.initialValue !== 'function') {
-						initialData[field.name] = field.initialValue;
-					} else {
-						// Function-based initialValues are skipped for nested items
-						// They will use field type defaults instead
-						initialData[field.name] = getDefaultValueForFieldType(field.type);
-					}
-				} else {
-					initialData[field.name] = getDefaultValueForFieldType(field.type);
-				}
-			});
-		}
-
-		return { ...initialData, ...value };
-	}
-
-	// Local state for editing
-	let editingData = $state<Record<string, any>>(initializeData());
-
-	function handleSave() {
-		onSave(editingData);
-		onClose();
-	}
-
-	function handleCancel() {
-		onClose();
-	}
-
 	// Handle backdrop click
 	function handleBackdropClick(e: MouseEvent) {
 		if (e.target === e.currentTarget) {
@@ -81,65 +44,77 @@
 </script>
 
 {#if open}
-	<!-- Backdrop - fixed to viewport on mobile (below navbar), relative to parent on desktop -->
+	<!-- Backdrop: full-editor overlay -->
 	<div
-		class="bg-background/80 fixed top-12 right-0 bottom-0 left-0 z-[100] flex items-center justify-center p-6 backdrop-blur-sm sm:absolute sm:top-0 sm:p-4"
+		class="bg-background/80 absolute inset-0 z-50 backdrop-blur-xs"
 		onclick={handleBackdropClick}
 		onkeydown={handleKeydown}
 		role="button"
 		tabindex="-1"
-	>
-		<!-- Modal Content -->
-		<Card.Root class="flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden shadow-lg">
-			<Card.Header class="border-b">
-				<div class="flex items-center justify-between">
-					<div>
-						<Card.Title>{schema.title}</Card.Title>
-						{#if schema.description}
-							<Card.Description>{schema.description}</Card.Description>
-						{/if}
-					</div>
-					<Button variant="ghost" size="icon" onclick={onClose}>
-						<svg class="h-4 w-4" 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>
-			</Card.Header>
+	></div>
 
-			<Card.Content class="flex-1 overflow-auto p-6">
-				<div class="space-y-4">
-					{#if schema.fields}
-						{#each schema.fields as field, index (index)}
-							<SchemaField
-								{field}
-								value={editingData[field.name]}
-								documentData={editingData}
-								onUpdate={(newValue) => {
-									editingData = { ...editingData, [field.name]: newValue };
-								}}
-								{onOpenReference}
-								{readonly}
-								{organizationId}
-							/>
-						{/each}
+	<!-- Panel: centered dialog with max-width and max-height -->
+	<div
+		class="border-border bg-background absolute top-1/2 left-1/2 z-50 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"
+	>
+		<div
+			class="border-border bg-background 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}
-				</div>
-			</Card.Content>
-
-			<Card.Footer class="flex justify-end gap-2 border-t">
-				{#if readonly}
-					<Button onclick={onClose}>Close</Button>
-				{:else}
-					<Button variant="outline" onclick={handleCancel}>Cancel</Button>
-					<Button onclick={handleSave}>Save Changes</Button>
 				{/if}
-			</Card.Footer>
-		</Card.Root>
+				<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 class="bg-background 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>
 	</div>
 {/if}

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

@@ -4,8 +4,7 @@ interface Props {
     schema: SchemaType;
     value: Record<string, any>;
     onClose: () => void;
-    onSave: (value: Record<string, any>) => void;
-    onUpdate?: (value: Record<string, any>) => void;
+    onUpdate: (value: Record<string, any>) => void;
     onOpenReference?: (documentId: string, documentType: string) => void;
     readonly?: boolean;
     organizationId?: string;

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":"AAKA,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,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,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;AAuHF,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":"AAIA,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;AAqFF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}