@aphexcms/cms-core 9.2.0 → 9.2.2

package/dist/components/admin/DocumentEditor.svelte

@@ -3,6 +3,7 @@
 	import { Button } from '@aphexcms/ui/shadcn/button';
 	import { Badge } from '@aphexcms/ui/shadcn/badge';
 	import { documents } from '../../api/documents';
+	import { assets } from '../../api/assets';
 	import { ApiError } from '../../api/client';
 	import SchemaField from './SchemaField.svelte';
 	import { findOrphanedFields, type OrphanedField } from '../../schema-utils/cleanup';
@@ -18,7 +19,20 @@
 	import { cmsLogger } from '../../utils/logger';
 	import { toast } from 'svelte-sonner';
 	import { confirmDialog } from './confirm-dialog/confirm-dialog.svelte';
-	import { History, Trash2, Ellipsis, Code, Maximize2, Minimize2 } from '@lucide/svelte';
+	import {
+		History,
+		Trash2,
+		Ellipsis,
+		Code,
+		Maximize2,
+		Minimize2,
+		Monitor,
+		RefreshCw,
+		ExternalLink
+	} from '@lucide/svelte';
+	import { stegaEncodeDocument } from '../../preview/stega.js';
+	import { collectAssetRefs, injectAssetData, type ResolvedAsset } from '../../preview/assets.js';
+	import { setRichtextEditorRegistry } from '../../richtext-context.svelte.js';
 
 	interface Props {
 		schemas: SchemaType[];
@@ -45,6 +59,12 @@
 		focusMode?: boolean;
 		/** Toggle host-driven focus mode. Omit to hide the focus button entirely. */
 		onToggleFocus?: () => void;
+		/** When true, split the editor with a live preview iframe on the right. */
+		presentationMode?: boolean;
+		/** Toggle host-driven presentation mode. Omit to hide the button entirely. */
+		onTogglePresentation?: () => void;
+		/** Organization ID from the host context — used as fallback for new docs that haven't been saved yet. */
+		organizationId?: string | null;
 	}
 
 	let {
@@ -64,13 +84,19 @@
 		externalVersionPreview = null,
 		isReadOnly = false,
 		focusMode = false,
-		onToggleFocus
+		onToggleFocus,
+		presentationMode = false,
+		onTogglePresentation,
+		organizationId = null
 	}: Props = $props();
 
 	// Set schema context for child components (ArrayField, etc.)
 	// svelte-ignore state_referenced_locally
 	setSchemaContext(schemas);
 
+	// Registry for RichtextField editors — allows focusFieldByName to position the cursor
+	const richtextEditors = setRichtextEditorRegistry();
+
 	// Read permissions from the AdminApp context for per-action gating.
 	// `isReadOnly` prop, when explicitly true, forces everything off — this is
 	// the escape hatch for hosts that embed the editor outside the RBAC shell
@@ -135,6 +161,379 @@
 	// Inspect modal
 	let showInspect = $state(false);
 
+	// Presentation mode — live preview iframe alongside the editor fields
+	let iframeRef = $state<HTMLIFrameElement | null>(null);
+	let iframeStega = $state(true);
+	let previewEditMode = $state(true);
+	let focusedFieldName = $state<string | null>(null);
+	let fieldsWidth = $state(500);
+	let isResizing = $state(false);
+
+	function refreshPreview() {
+		if (!iframeRef || !iframeUrl) return;
+		iframeRef.src = iframeUrl;
+	}
+
+	// --- Live-preview asset resolution -------------------------------------------------
+	// Asset URLs are normally resolved server-side at page load, so a newly-added/changed
+	// image ref has no URL on the frontend until the change is saved + the page reloads
+	// (auto-save is debounced, so a reload would race the save and lose). Instead we resolve
+	// refs → { url, alt } here and inject them into the pushed document, so the URL travels
+	// with the live snapshot — saved or not. (This mirrors how Payload carries upload URLs in
+	// its live-preview form state.) The collect/inject walk is shared with the server's
+	// `assetService.injectAssetUrls`, so preview and SSR documents come out the same shape.
+	// Cached so typing (no new refs) never refetches.
+	const previewAssetCache = new Map<string, ResolvedAsset>();
+
+	async function resolvePreviewAssets(refs: Set<string>): Promise<void> {
+		const missing = [...refs].filter((ref) => !previewAssetCache.has(ref));
+		await Promise.all(
+			missing.map(async (ref) => {
+				try {
+					const res = await assets.getById(ref);
+					if (res.success && res.data) {
+						previewAssetCache.set(ref, { url: res.data.url, alt: res.data.alt ?? undefined });
+					}
+				} catch {
+					// Leave unresolved — the frontend falls back to its server-loaded map.
+				}
+			})
+		);
+	}
+
+	// Snapshot the document, inject resolved asset URLs, and push it to the preview iframe.
+	async function postPreviewData(win: Window): Promise<void> {
+		const snapshot = $state.snapshot(documentData);
+		const refs = collectAssetRefs(snapshot);
+		await resolvePreviewAssets(refs);
+		injectAssetData(snapshot, previewAssetCache);
+		win.postMessage(
+			{
+				type: 'aphex:data',
+				document: iframeStega ? stegaEncodeDocument(snapshot, schema?.fields ?? []) : snapshot
+			},
+			'*'
+		);
+	}
+
+	function openPreviewInNewTab() {
+		if (iframeUrl) window.open(iframeUrl, '_blank');
+	}
+
+	function startResize(e: MouseEvent) {
+		e.preventDefault();
+		isResizing = true;
+		const startX = e.clientX;
+		const startWidth = fieldsWidth;
+		function onMove(ev: MouseEvent) {
+			fieldsWidth = Math.max(500, Math.min(700, startWidth + (ev.clientX - startX)));
+		}
+		function onUp() {
+			isResizing = false;
+			window.removeEventListener('mousemove', onMove);
+			window.removeEventListener('mouseup', onUp);
+		}
+		window.addEventListener('mousemove', onMove);
+		window.addEventListener('mouseup', onUp);
+	}
+
+	// Derived from the already-loaded schema + live documentData — no extra prop needed.
+	// orgId comes from _meta so multi-tenant schemas can build org-specific URLs.
+	const resolvedPreviewUrl = $derived.by(() => {
+		if (!schema?.previewUrl) return null;
+		if (typeof schema.previewUrl === 'string') return schema.previewUrl;
+		const orgId =
+			(fullDocument?._meta?.organizationId as string | null | undefined) ?? organizationId ?? null;
+		return schema.previewUrl(documentData as Record<string, unknown>, orgId) ?? null;
+	});
+
+	// Draft = preview URL as-is (with ?aphex-preview=1 + live data push).
+	// Published = strip aphex-preview param so the iframe shows the real published page.
+	// Relative paths (e.g. '/blog/x') resolve against the studio's own origin;
+	// absolute URLs target a separate public site unchanged.
+	const iframeUrl = $derived.by(() => {
+		if (!resolvedPreviewUrl) return null;
+		const base = typeof window !== 'undefined' ? window.location.origin : undefined;
+		let u: URL;
+		try {
+			u = new URL(resolvedPreviewUrl, base);
+		} catch {
+			return resolvedPreviewUrl;
+		}
+		if (perspective === 'published') {
+			u.searchParams.delete('aphex-preview');
+		}
+		return u.toString();
+	});
+
+	$effect(() => {
+		if (!presentationMode) return;
+		const handler = (e: MessageEvent) => {
+			if (!e.data || typeof e.data !== 'object') return;
+			const msg = e.data as {
+				type: string;
+				fieldPath?: string;
+				blockIndex?: number;
+				blockKey?: string;
+				arrayIndex?: number;
+				objectPath?: string;
+				linkHref?: string;
+			};
+			if (msg.type === 'aphex:ready') {
+				iframeStega = (msg as any).stega !== false;
+				if (iframeRef?.contentWindow) postPreviewData(iframeRef.contentWindow);
+				if (!previewEditMode) {
+					iframeRef?.contentWindow?.postMessage({ type: 'aphex:edit-mode', enabled: false }, '*');
+				}
+			} else if (msg.type === 'aphex:field-click' && msg.fieldPath) {
+				focusFieldByName(msg.fieldPath, {
+					blockIndex: msg.blockIndex,
+					blockKey: msg.blockKey,
+					arrayIndex: msg.arrayIndex,
+					objectPath: msg.objectPath,
+					linkHref: msg.linkHref
+				});
+			}
+		};
+		window.addEventListener('message', handler);
+		return () => window.removeEventListener('message', handler);
+	});
+
+	$effect(() => {
+		if (!presentationMode || perspective === 'published' || !iframeRef?.contentWindow) return;
+		// Track documentData so this effect re-runs on every edit; the debounce coalesces.
+		void documentData;
+		const timer = setTimeout(() => {
+			if (iframeRef?.contentWindow) postPreviewData(iframeRef.contentWindow);
+		}, 100);
+		return () => clearTimeout(timer);
+	});
+
+	/**
+	 * Map a portable text array index to the absolute ProseMirror cursor position (end of content)
+	 * for that block in the TipTap editor. Accounts for list grouping (multiple PT list-item blocks
+	 * collapse into one bulletList/orderedList TipTap node) and blockquote nesting.
+	 * Returns null when the block can't be navigated to (nested lists, unknown structure).
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function findTiptapCursorForPTBlock(
+		ptBlocks: unknown[],
+		targetIdx: number,
+		doc: any
+	): number | null {
+		// Absolute start positions of each TipTap top-level child
+		const nodePositions: number[] = [];
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		doc.forEach((_: any, offset: number) => nodePositions.push(offset));
+
+		let tiptapIdx = 0;
+		let ptIdx = 0;
+
+		while (ptIdx < ptBlocks.length && tiptapIdx < doc.childCount) {
+			const block = ptBlocks[ptIdx] as Record<string, unknown>;
+			const isListItem = block._type === 'block' && block.listItem != null;
+
+			if (isListItem) {
+				// Count ALL consecutive list items — buildListNode consumes them into one TipTap node
+				let groupCount = 0;
+				let targetOffsetInGroup = -1; // which level-1 listItem the target is
+				let level1Count = 0;
+				let targetIsNested = false;
+
+				while (ptIdx + groupCount < ptBlocks.length) {
+					const b = ptBlocks[ptIdx + groupCount] as Record<string, unknown>;
+					if (b._type !== 'block' || b.listItem == null) break;
+					const bLevel = (b.level as number | undefined) ?? 1;
+					if (ptIdx + groupCount === targetIdx) {
+						if (bLevel === 1) targetOffsetInGroup = level1Count;
+						else targetIsNested = true;
+					}
+					if (bLevel === 1) level1Count++;
+					groupCount++;
+				}
+
+				if (targetIsNested) return null; // nested list items are too complex to navigate
+
+				if (targetOffsetInGroup !== -1) {
+					const listNode = doc.child(tiptapIdx);
+					const listAbsPos = nodePositions[tiptapIdx] as number;
+					let result: number | null = null;
+					let itemIdx = 0;
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					listNode.forEach((listItem: any, liOffset: number) => {
+						if (itemIdx++ !== targetOffsetInGroup) return;
+						const para = listItem.firstChild;
+						if (para?.isTextblock) {
+							// listAbsPos + 1 (list open) + liOffset + 1 (listItem open) + 1 (para open) + content
+							result = listAbsPos + 1 + liOffset + 2 + para.content.size;
+						}
+					});
+					return result;
+				}
+
+				ptIdx += groupCount;
+				tiptapIdx++;
+			} else {
+				if (ptIdx === targetIdx) {
+					const node = doc.child(tiptapIdx);
+					const nodeAbsPos = nodePositions[tiptapIdx] as number;
+
+					if (node.type.name === 'blockquote') {
+						// blockquote > paragraph
+						const para = node.firstChild;
+						if (para?.isTextblock) {
+							return nodeAbsPos + 2 + para.content.size;
+						}
+					}
+
+					if (node.isTextblock) {
+						return nodeAbsPos + 1 + node.content.size;
+					}
+
+					return null;
+				}
+				ptIdx++;
+				tiptapIdx++;
+			}
+		}
+
+		return null;
+	}
+
+	async function focusFieldByName(
+		fieldName: string,
+		opts: {
+			blockIndex?: number;
+			blockKey?: string;
+			arrayIndex?: number;
+			objectPath?: string;
+			linkHref?: string;
+		} = {}
+	) {
+		focusedFieldName = fieldName;
+		// Switch to the field's group so it's visible before scrolling
+		const field = schema?.fields.find((f) => f.name === fieldName);
+		if (field?.group) {
+			const group = Array.isArray(field.group) ? field.group[0] : field.group;
+			if (group) activeGroup = group;
+		}
+		await tick();
+		const container = document.querySelector<HTMLElement>(`[data-field-name="${fieldName}"]`);
+		if (!container) return;
+		container.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		setTimeout(() => {
+			if (focusedFieldName === fieldName) focusedFieldName = null;
+		}, 2000);
+
+		const { blockIndex, blockKey, arrayIndex, objectPath, linkHref } = opts;
+
+		// 1. Richtext field — position cursor (text blocks) or open modal (custom blocks)
+		const richtextHandle = richtextEditors.get(fieldName);
+		const richtextEditor = richtextHandle?.editor;
+
+		// Link click — drop the cursor *inside* the matching link mark and open the link
+		// popover explicitly (the editor's transaction heuristic can miss a programmatic
+		// selection move, so we don't rely on it here).
+		if (richtextEditor && linkHref) {
+			const doc = richtextEditor.state.doc;
+			let linkPos: number | null = null;
+			doc.descendants((node, pos) => {
+				if (linkPos !== null) return false;
+				if (
+					node.isText &&
+					node.marks.some((m) => m.type.name === 'link' && m.attrs.href === linkHref)
+				) {
+					linkPos = pos + 1; // a position inside the link's text
+					return false;
+				}
+				return true;
+			});
+			if (linkPos !== null) {
+				richtextEditor.commands.focus();
+				richtextEditor.commands.setTextSelection(linkPos);
+				richtextHandle?.openLinkPopover();
+				return;
+			}
+		}
+
+		if (richtextEditor && (blockIndex != null || blockKey)) {
+			const doc = richtextEditor.state.doc;
+
+			// Custom blocks carry a _key — find by key so index drift doesn't matter
+			if (blockKey) {
+				let nodePos: number | null = null;
+				let nodeType: string | null = null;
+				doc.forEach((node, offset) => {
+					if (node.attrs._key === blockKey) {
+						nodePos = offset;
+						nodeType = node.attrs._type;
+					}
+				});
+				if (nodePos !== null) {
+					const domNode = richtextEditor.view.nodeDOM(nodePos) as HTMLElement | null;
+					// Image blocks open their editor by clicking the block body — their only
+					// <button> is Remove, so clicking the first button would DELETE the image.
+					// Custom blocks (callout/code) open via their first button.
+					if (nodeType === 'image') {
+						domNode?.querySelector<HTMLElement>('[data-pt-image-edit]')?.click();
+					} else {
+						domNode?.querySelector<HTMLButtonElement>('button')?.click();
+					}
+				}
+				return;
+			}
+
+			// Standard text blocks — use PT array to correctly map blockIndex → TipTap position,
+			// accounting for list grouping and blockquote nesting.
+			const ptBlocks = documentData[fieldName];
+			if (Array.isArray(ptBlocks)) {
+				const cursorPos = findTiptapCursorForPTBlock(ptBlocks, blockIndex!, doc);
+				if (cursorPos !== null) {
+					richtextEditor.commands.focus();
+					richtextEditor.commands.setTextSelection(cursorPos);
+					return;
+				}
+			}
+			// Fallback: just focus the editor
+			richtextEditor.commands.focus();
+			return;
+		}
+
+		// 2. Nested object subfield — find the subfield container by its dotted path
+		if (objectPath) {
+			const subContainer = container.querySelector<HTMLElement>(
+				`[data-field-path="${objectPath}"]`
+			);
+			if (subContainer) {
+				subContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+				const focusable = subContainer.querySelector<HTMLElement>(
+					'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])'
+				);
+				focusable?.focus();
+				return;
+			}
+		}
+
+		// 3. Primitive array — focus the Nth input inside the array field
+		if (arrayIndex != null) {
+			const inputs = container.querySelectorAll<HTMLElement>(
+				'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])'
+			);
+			const target = inputs[arrayIndex];
+			if (target) {
+				target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+				target.focus();
+				return;
+			}
+		}
+
+		// 4. Fallback — focus the first interactive element in the field
+		const focusable = container.querySelector<HTMLElement>(
+			'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly]), [contenteditable="true"]'
+		);
+		focusable?.focus();
+	}
+
 	// Field group tabs — only render when schema declares `groups`.
 	// 'all' = show every field; otherwise filter to fields whose `group`
 	// matches (supports string or string[]).
@@ -650,6 +1049,9 @@
 				lastSaved = new Date();
 				hasUnsavedChanges = false;
 				if (response.data?.id) notifyDocumentChanged(response.data.id);
+				if (presentationMode && iframeRef?.contentWindow) {
+					iframeRef.contentWindow.postMessage({ type: 'aphex:refresh' }, '*');
+				}
 				if (isAutoSave) {
 					// Trigger validation on all fields after auto-save
 					validateAllFields(); // Update validation status
@@ -1155,6 +1557,20 @@
 						</div>
 					{/if}
 
+					{#if onTogglePresentation && schema?.previewUrl}
+						<Button
+							variant="ghost"
+							size="icon"
+							onclick={onTogglePresentation}
+							class="hidden h-8 w-8 hover:cursor-pointer lg:flex {presentationMode
+								? 'text-primary'
+								: ''}"
+							title={presentationMode ? 'Exit presentation mode' : 'Present'}
+						>
+							<Monitor class="h-4 w-4" />
+						</Button>
+					{/if}
+
 					{#if onToggleFocus}
 						<Button
 							variant="ghost"
@@ -1235,8 +1651,16 @@
 	</div>
 
 	<!-- Content Form -->
-	<div data-document-editor class="relative flex min-h-0 flex-1 flex-col">
-		<div class="flex flex-1 flex-col overflow-auto p-4 lg:p-6">
+	<div
+		data-document-editor
+		class="relative flex min-h-0 flex-1 {presentationMode ? 'flex-row' : 'flex-col'}"
+	>
+		<div
+			class="{presentationMode
+				? 'shrink-0 overflow-y-auto'
+				: 'flex flex-1 flex-col overflow-auto'} p-4 lg:p-6"
+			style={presentationMode ? `width: ${fieldsWidth}px; min-width: 500px` : undefined}
+		>
 			<div class="flex w-full flex-1 flex-col gap-4 lg:gap-6">
 				{#if saveError}
 					<div class="bg-destructive/10 border-destructive/20 rounded-md border p-3">
@@ -1371,23 +1795,30 @@
 									: isViewingPublished && publishedData
 										? publishedData
 										: documentData}
-							<SchemaField
-								{field}
-								value={viewData[field.name]}
-								documentData={viewData}
-								onUpdate={(newValue) => {
-									if (isViewingPublished) return;
-									documentData = { ...documentData, [field.name]: newValue };
-									hasUnsavedChanges = true;
-								}}
-								{onOpenReference}
-								schemaType={documentType}
-								readonly={isReadOnly ||
-									isViewingPublished ||
-									isPreviewingVersion ||
-									isFieldReadonly(field.name)}
-								organizationId={fullDocument?._meta?.organizationId}
-							/>
+							<div
+								data-field-name={field.name}
+								class="rounded-md transition-all duration-300 {focusedFieldName === field.name
+									? 'ring-primary/40 ring-2 ring-offset-2'
+									: ''}"
+							>
+								<SchemaField
+									{field}
+									value={viewData[field.name]}
+									documentData={viewData}
+									onUpdate={(newValue) => {
+										if (isViewingPublished) return;
+										documentData = { ...documentData, [field.name]: newValue };
+										hasUnsavedChanges = true;
+									}}
+									{onOpenReference}
+									schemaType={documentType}
+									readonly={isReadOnly ||
+										isViewingPublished ||
+										isPreviewingVersion ||
+										isFieldReadonly(field.name)}
+									organizationId={fullDocument?._meta?.organizationId}
+								/>
+							</div>
 						{/each}
 
 						{#snippet failed(error, reset)}
@@ -1414,6 +1845,102 @@
 				{/if}
 			</div>
 		</div>
+
+		<!-- Preview iframe (presentation mode only) -->
+		{#if presentationMode}
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+			<!-- Drag handle -->
+			<div
+				role="separator"
+				aria-orientation="vertical"
+				class="hover:bg-primary/20 active:bg-primary/30 w-1 shrink-0 cursor-ew-resize transition-colors"
+				onmousedown={startResize}
+			></div>
+			<div class="flex min-h-0 flex-1 flex-col">
+				{#if iframeUrl}
+					<!-- Preview toolbar -->
+					<div
+						class="border-rule bg-background flex h-10 shrink-0 items-center gap-1 border-b px-2"
+					>
+						<!-- Edit toggle -->
+						<button
+							onclick={() => {
+								previewEditMode = !previewEditMode;
+								iframeRef?.contentWindow?.postMessage(
+									{ type: 'aphex:edit-mode', enabled: previewEditMode },
+									'*'
+								);
+							}}
+							class="hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 transition-colors"
+							title={previewEditMode ? 'Disable edit mode' : 'Enable edit mode'}
+						>
+							<!-- Toggle pill -->
+							<div
+								class="relative h-[14px] w-6 rounded-full transition-colors {previewEditMode
+									? 'bg-primary'
+									: 'bg-muted-foreground/30'}"
+							>
+								<div
+									class="absolute top-[2px] h-[10px] w-[10px] rounded-full bg-white shadow transition-all {previewEditMode
+										? 'left-[12px]'
+										: 'left-[2px]'}"
+								></div>
+							</div>
+							<span
+								class="text-[11px] font-medium tracking-wide {previewEditMode
+									? 'text-foreground'
+									: 'text-muted-foreground'}">Edit</span
+							>
+						</button>
+
+						<!-- Refresh -->
+						<button
+							onclick={refreshPreview}
+							class="hover:bg-muted text-muted-foreground hover:text-foreground cursor-pointer rounded p-1.5 transition-colors"
+							title="Refresh preview"
+						>
+							<RefreshCw class="h-3.5 w-3.5" />
+						</button>
+
+						<!-- URL bar -->
+						<div class="bg-muted mx-1 min-w-0 flex-1 rounded px-2.5 py-1">
+							<span class="text-muted-foreground block truncate text-center font-mono text-[11px]"
+								>{iframeUrl}</span
+							>
+						</div>
+
+						<!-- Open in new tab -->
+						<button
+							onclick={openPreviewInNewTab}
+							class="hover:bg-muted text-muted-foreground hover:text-foreground cursor-pointer rounded p-1.5 transition-colors"
+							title="Open in new tab"
+						>
+							<ExternalLink class="h-3.5 w-3.5" />
+						</button>
+					</div>
+
+					<div class="relative min-h-0 flex-1">
+						<iframe
+							bind:this={iframeRef}
+							src={iframeUrl}
+							class="h-full w-full border-none"
+							title="Page preview"
+						></iframe>
+						{#if isResizing}
+							<div class="absolute inset-0"></div>
+						{/if}
+					</div>
+				{:else}
+					<div class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
+						<Monitor class="text-muted-foreground/30 h-10 w-10" />
+						<p class="text-muted-foreground text-sm">No preview URL yet.</p>
+						<p class="text-muted-foreground/50 text-xs">
+							Fill in the required fields to enable preview.
+						</p>
+					</div>
+				{/if}
+			</div>
+		{/if}
 	</div>
 
 	<!-- Sanity-style bottom bar -->

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

@@ -24,6 +24,12 @@ interface Props {
     focusMode?: boolean;
     /** Toggle host-driven focus mode. Omit to hide the focus button entirely. */
     onToggleFocus?: () => void;
+    /** When true, split the editor with a live preview iframe on the right. */
+    presentationMode?: boolean;
+    /** Toggle host-driven presentation mode. Omit to hide the button entirely. */
+    onTogglePresentation?: () => void;
+    /** Organization ID from the host context — used as fallback for new docs that haven't been saved yet. */
+    organizationId?: string | null;
 }
 declare const DocumentEditor: import("svelte").Component<Props, {}, "">;
 type DocumentEditor = ReturnType<typeof DocumentEditor>;

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;AAexD,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;IACrB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAsjDF,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":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AA4BxD,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;IACrB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,8EAA8E;IAC9E,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,yGAAyG;IACzG,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAsgEF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/admin/SchemaField.svelte

@@ -123,7 +123,7 @@
 	const validationClasses = $derived(getValidationClasses(hasErrors));
 </script>
 
-<div class="space-y-2">
+<div class="space-y-2" data-field-path={fieldPath}>
 	<div class="flex items-center justify-between">
 		<Label for={field.name}>
 			{field.title}

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

@@ -507,7 +507,7 @@
 		{#key dndKey}
 			<DragDropProvider onDragEnd={handleDragEnd}>
 				<div class="space-y-1">
-					{#each keyedItems as item, index (item._key)}
+					{#each keyedItems as item, index (item._key ?? `__row-${index}`)}
 						{@const sortable = createSortable({ id: item._key, index, disabled: readonly })}
 						<div
 							{@attach sortable.attach}
@@ -908,7 +908,7 @@
 		{#key dndKey}
 			<DragDropProvider onDragEnd={handleDragEnd}>
 				<div class="space-y-1">
-					{#each keyedItems as item, index (item._key)}
+					{#each keyedItems as item, index (item._key ?? `__row-${index}`)}
 						{@const sortable = createSortable({ id: item._key, index, disabled: readonly })}
 						<div
 							{@attach sortable.attach}