@aphexcms/cms-core 0.1.1 → 0.1.3

package/src/components/AdminApp.svelte

@@ -1,1078 +0,0 @@
-<script lang="ts">
-	/**
-	 * AdminApp - Complete CMS Admin Interface
-	 * A packaged, reusable Sanity-style admin UI
-	 */
-	import { Alert, AlertDescription, AlertTitle } from '@aphexcms/ui/shadcn/alert';
-	import { Button } from '@aphexcms/ui/shadcn/button';
-	import * as Tabs from '@aphexcms/ui/shadcn/tabs';
-	import { page } from '$app/state';
-	import { goto } from '$app/navigation';
-	import { SvelteURLSearchParams } from 'svelte/reactivity';
-	import type { SchemaType } from '../types/index.js';
-	import DocumentEditor from './admin/DocumentEditor.svelte';
-	import type { DocumentType } from '../types/index.js';
-	import { documents } from '../api/index.js';
-	import { activeTabState } from '$lib/stores/activeTab.svelte.js';
-
-	type InitDocumentType = Pick<DocumentType, 'name' | 'title' | 'description'>;
-
-	interface Props {
-		schemas: SchemaType[];
-		documentTypes: InitDocumentType[];
-		schemaError?: { message: string } | null;
-		title?: string;
-		graphqlSettings?: { endpoint: string; enableGraphiQL: boolean } | null;
-		isReadOnly?: boolean;
-	}
-
-	let {
-		schemas,
-		documentTypes,
-		schemaError = null,
-		title = 'Aphex CMS',
-		graphqlSettings = null,
-		isReadOnly = false
-	}: Props = $props();
-
-	// Handler for when tabs change (instead of bind:value)
-	function handleTabChange(value: string) {
-		activeTabState.value = value as 'structure' | 'vision';
-	}
-
-	// Set schema context for child components
-
-	const hasDocumentTypes = $derived(documentTypes.length > 0);
-
-	// Client-side routing state
-	let currentView = $state<'dashboard' | 'documents' | 'editor'>('dashboard');
-	let selectedDocumentType = $state<string | null>(null);
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	let documentsList = $state<any[]>([]);
-	let loading = $state(false);
-	let error = $state<string | null>(null);
-
-	// Mobile navigation state (Sanity-style)
-	let mobileView = $state<'types' | 'documents' | 'editor'>('types');
-
-	// Window size reactivity
-	let windowWidth = $state(1024); // Default to desktop size
-
-	// Document editor state (moved before layoutConfig)
-	let editingDocumentId = $state<string | null>(null);
-	let isCreatingDocument = $state(false);
-
-	// Editor stack for nested references
-	interface EditorStackItem {
-		documentId: string;
-		documentType: string;
-		isCreating: boolean;
-	}
-	let editorStack = $state<EditorStackItem[]>([]);
-
-	// Track which editor is currently active/focused (0 = primary, 1+ = stacked)
-	let activeEditorIndex = $state<number>(0);
-
-	// Calculate how many editors can be shown expanded based on available space
-	const MIN_EDITOR_WIDTH = 600; // Minimum width for ANY expanded editor
-	const COLLAPSED_WIDTH = 60; // Width of collapsed panels
-	const TYPES_EXPANDED = 350;
-	const DOCS_EXPANDED = 350;
-
-	let layoutConfig = $derived.by(() => {
-		const start = performance.now();
-		const totalEditors = (currentView === 'editor' ? 1 : 0) + editorStack.length;
-
-		if (totalEditors === 0) {
-			return {
-				totalEditors: 0,
-				expandedCount: 0,
-				collapsedCount: 0,
-				typesCollapsed: false,
-				docsCollapsed: false,
-				expandedIndices: [] as number[],
-				activeIndex: activeEditorIndex,
-				typesExpanded: true,
-				docsExpanded: true
-			};
-		}
-
-		// Ensure activeEditorIndex is valid (can be -1 for types, -2 for docs)
-		const validActiveIndex =
-			activeEditorIndex < 0
-				? activeEditorIndex
-				: Math.max(0, Math.min(activeEditorIndex, totalEditors - 1));
-
-		// Check if types or docs are active (user clicked on collapsed strip)
-		const typesActive = activeEditorIndex === -1;
-		const docsActive = activeEditorIndex === -2;
-
-		// Calculate space requirements
-		// If user clicked types/docs, force those panels expanded
-		// Otherwise, prioritize editors over panels
-
-		let typesExpanded = typesActive || true; // Expand types if clicked, or by default
-		let docsExpanded = docsActive || true; // Expand docs if clicked, or by default
-		let typesWidth = typesExpanded ? TYPES_EXPANDED : COLLAPSED_WIDTH;
-		let docsWidth = selectedDocumentType ? (docsExpanded ? DOCS_EXPANDED : COLLAPSED_WIDTH) : 0;
-
-		// If user explicitly clicked types/docs, keep those panels expanded no matter what
-		if (typesActive || docsActive) {
-			// Force the clicked panel to stay expanded
-			typesExpanded = typesActive ? true : typesExpanded;
-			docsExpanded = docsActive ? true : docsExpanded;
-			typesWidth = typesActive ? TYPES_EXPANDED : COLLAPSED_WIDTH;
-			docsWidth = docsActive ? DOCS_EXPANDED : selectedDocumentType ? COLLAPSED_WIDTH : 0;
-
-			// Calculate how many editors fit with these panel sizes
-			let remainingWidth = windowWidth - typesWidth - docsWidth;
-			let maxExpandedEditors = Math.floor(remainingWidth / MIN_EDITOR_WIDTH);
-
-			// Expand as many editors as possible around the last active editor
-			if (maxExpandedEditors < 1) maxExpandedEditors = 0;
-
-			// Build expanded indices for editors
-			let expandedIndices: number[] = [];
-			if (maxExpandedEditors > 0 && totalEditors > 0) {
-				// Start from rightmost editor (most recently opened)
-				const lastEditorIndex = totalEditors - 1;
-				expandedIndices.push(lastEditorIndex);
-
-				// Expand editors to the left if space allows
-				for (
-					let i = lastEditorIndex - 1;
-					i >= 0 && expandedIndices.length < maxExpandedEditors;
-					i--
-				) {
-					expandedIndices.push(i);
-				}
-			}
-
-			const expandedCount = expandedIndices.length;
-
-			return {
-				totalEditors,
-				expandedCount,
-				collapsedCount: totalEditors - expandedCount,
-				typesCollapsed: !typesExpanded,
-				docsCollapsed: !docsExpanded,
-				expandedIndices,
-				activeIndex: validActiveIndex,
-				typesExpanded,
-				docsExpanded
-			};
-		}
-
-		// Normal mode: prioritize editors over panels
-		// Calculate how many editors we can fit with current panel widths
-		let remainingWidth = windowWidth - typesWidth - docsWidth;
-		let maxExpandedEditors = Math.floor(remainingWidth / MIN_EDITOR_WIDTH);
-
-		// If we can't fit all editors, start collapsing panels
-		if (maxExpandedEditors < totalEditors) {
-			// Try collapsing docs first
-			docsWidth = selectedDocumentType ? COLLAPSED_WIDTH : 0;
-			docsExpanded = false;
-			remainingWidth = windowWidth - typesWidth - docsWidth;
-			maxExpandedEditors = Math.floor(remainingWidth / MIN_EDITOR_WIDTH);
-		}
-
-		// If still not enough space, collapse types too
-		if (maxExpandedEditors < totalEditors) {
-			typesWidth = COLLAPSED_WIDTH;
-			typesExpanded = false;
-			remainingWidth = windowWidth - typesWidth - docsWidth;
-			maxExpandedEditors = Math.floor(remainingWidth / MIN_EDITOR_WIDTH);
-		}
-
-		// Always expand at least the active editor
-		if (maxExpandedEditors < 1) {
-			maxExpandedEditors = 1;
-		}
-
-		// Expand editors around the active one symmetrically
-		let expandedIndices: number[] = [validActiveIndex];
-
-		if (maxExpandedEditors > 1) {
-			// How many editors to add on each side
-			const slotsToFill = Math.min(maxExpandedEditors - 1, totalEditors - 1);
-
-			// Expand symmetrically around active editor
-			for (let offset = 1; offset <= slotsToFill; offset++) {
-				const leftIndex = validActiveIndex - offset;
-				const rightIndex = validActiveIndex + offset;
-
-				// Alternate left and right to maintain symmetry
-				if (offset % 2 === 1) {
-					// Odd offset: try right first, then left
-					if (rightIndex < totalEditors && !expandedIndices.includes(rightIndex)) {
-						expandedIndices.push(rightIndex);
-						if (expandedIndices.length >= maxExpandedEditors) break;
-					}
-					if (leftIndex >= 0 && !expandedIndices.includes(leftIndex)) {
-						expandedIndices.push(leftIndex);
-						if (expandedIndices.length >= maxExpandedEditors) break;
-					}
-				} else {
-					// Even offset: try left first, then right
-					if (leftIndex >= 0 && !expandedIndices.includes(leftIndex)) {
-						expandedIndices.push(leftIndex);
-						if (expandedIndices.length >= maxExpandedEditors) break;
-					}
-					if (rightIndex < totalEditors && !expandedIndices.includes(rightIndex)) {
-						expandedIndices.push(rightIndex);
-						if (expandedIndices.length >= maxExpandedEditors) break;
-					}
-				}
-			}
-		}
-
-		const expandedCount = expandedIndices.length;
-
-		const end = performance.now();
-		console.log(
-			`[Layout Calc] ${(end - start).toFixed(3)}ms | Editors: ${totalEditors} | Expanded: ${expandedCount} | Window: ${windowWidth}px | Active: ${validActiveIndex} | ExpandedIndices: [${expandedIndices.join(', ')}]`
-		);
-
-		return {
-			totalEditors,
-			expandedCount,
-			collapsedCount: totalEditors - expandedCount,
-			typesCollapsed: !typesExpanded,
-			docsCollapsed: !docsExpanded,
-			expandedIndices,
-			activeIndex: validActiveIndex,
-			typesExpanded,
-			docsExpanded
-		};
-	});
-
-	let typesPanel = $derived.by(() => {
-		if (windowWidth < 620) {
-			return mobileView === 'types' ? 'w-full' : 'hidden';
-		}
-
-		return layoutConfig.typesExpanded ? 'w-[350px]' : 'w-[60px]';
-	});
-
-	let documentsPanelState = $derived.by(() => {
-		if (windowWidth < 620) {
-			const state = { visible: mobileView === 'documents', width: 'full' };
-			console.log('[Mobile Documents Panel]', { windowWidth, mobileView, state });
-			return state;
-		}
-		if (!selectedDocumentType) return { visible: false, width: 'none' };
-
-		const width = layoutConfig.docsExpanded ? 'normal' : 'compact';
-		return { visible: true, width };
-	});
-
-	let primaryEditorState = $derived.by(() => {
-		if (windowWidth < 620) {
-			return { visible: mobileView === 'editor', expanded: true };
-		}
-
-		if (currentView !== 'editor') return { visible: false, expanded: false };
-
-		const primaryIndex = 0;
-		const isExpanded = layoutConfig.expandedIndices.includes(primaryIndex);
-
-		return { visible: true, expanded: isExpanded };
-	});
-
-	// Update window width on resize
-	$effect(() => {
-		if (typeof window !== 'undefined') {
-			windowWidth = window.innerWidth;
-			const handleResize = () => {
-				windowWidth = window.innerWidth;
-			};
-			window.addEventListener('resize', handleResize);
-			return () => window.removeEventListener('resize', handleResize);
-		}
-	});
-
-	// Watch URL params for bookmarkable navigation
-	$effect(() => {
-		const url = page.url;
-		const docType = url.searchParams.get('docType');
-		const action = url.searchParams.get('action');
-		const docId = url.searchParams.get('docId');
-		const stackParam = url.searchParams.get('stack');
-
-		console.log('[URL Effect] Params:', {
-			docType,
-			action,
-			docId,
-			stackParam,
-			fullURL: url.toString()
-		});
-
-		if (action === 'create' && docType) {
-			console.log('[URL Effect] Branch: CREATE');
-			currentView = 'editor';
-			mobileView = 'editor';
-			selectedDocumentType = docType;
-			isCreatingDocument = true;
-			editingDocumentId = null;
-			editorStack = [];
-			fetchDocuments(docType);
-		} else if (docId) {
-			console.log('[URL Effect] Branch: EDIT (docId)');
-			currentView = 'editor';
-			mobileView = 'editor';
-			editingDocumentId = docId;
-			isCreatingDocument = false;
-
-			// Parse stack param to restore stacked editors
-			if (stackParam) {
-				const stackItems = stackParam.split(',').map((item) => {
-					const [type, id] = item.split(':');
-					return { documentType: type, documentId: id, isCreating: false };
-				});
-
-				// Only update stack and activeEditorIndex if the stack actually changed
-				const stackChanged =
-					editorStack.length !== stackItems.length ||
-					editorStack.some(
-						(item, i) =>
-							item.documentId !== stackItems[i]?.documentId ||
-							item.documentType !== stackItems[i]?.documentType
-					);
-
-				if (stackChanged) {
-					console.log('[AdminApp] Stack changed, updating editorStack and activeEditorIndex');
-					editorStack = stackItems;
-					// Set active editor to the last stacked editor
-					activeEditorIndex = stackItems.length; // 0 = primary, so stackItems.length is the last stacked editor
-				}
-			} else {
-				// Only reset if there was a stack before
-				if (editorStack.length > 0) {
-					editorStack = [];
-					activeEditorIndex = 0; // Primary editor is active
-				}
-			}
-
-			if (docType) {
-				selectedDocumentType = docType;
-				if (documentsList.length === 0 || selectedDocumentType !== docType) {
-					fetchDocuments(docType);
-				}
-			} else {
-				fetchDocumentForEditing(docId);
-			}
-		} else if (docType) {
-			console.log('[URL Effect] Branch: DOCUMENTS (docType only)');
-			currentView = 'documents';
-			mobileView = 'documents';
-			selectedDocumentType = docType;
-			editingDocumentId = null;
-			isCreatingDocument = false;
-			editorStack = [];
-			fetchDocuments(docType);
-		} else {
-			currentView = 'dashboard';
-			mobileView = 'types';
-			selectedDocumentType = null;
-			editingDocumentId = null;
-			isCreatingDocument = false;
-			editorStack = [];
-		}
-	});
-
-	// Watch orgId changes to refetch documents when switching organizations
-	$effect(() => {
-		const orgId = page.url.searchParams.get('orgId');
-
-		// When orgId changes and we have a selected document type, refetch documents
-		if (orgId && selectedDocumentType) {
-			fetchDocuments(selectedDocumentType);
-		}
-	});
-
-	async function navigateToDocumentType(docType: string) {
-		const params = new SvelteURLSearchParams(page.url.searchParams);
-		params.set('docType', docType);
-		params.delete('docId');
-		params.delete('action');
-		params.delete('stack');
-		await goto(`/admin?${params.toString()}`, { replaceState: false });
-		mobileView = 'documents';
-	}
-
-	async function navigateToCreateDocument(docType: string) {
-		const params = new SvelteURLSearchParams(page.url.searchParams);
-		params.set('docType', docType);
-		params.set('action', 'create');
-		params.delete('docId');
-		params.delete('stack');
-		await goto(`/admin?${params.toString()}`, { replaceState: false });
-		mobileView = 'editor';
-	}
-
-	async function navigateToEditDocument(docId: string, docType?: string, replace: boolean = false) {
-		const params = new SvelteURLSearchParams(page.url.searchParams);
-		params.set('docId', docId);
-		if (docType) params.set('docType', docType);
-		params.delete('action');
-		params.delete('fromDocId');
-		params.delete('fromDocType');
-		await goto(`/admin?${params.toString()}`, { replaceState: replace });
-		mobileView = 'editor';
-	}
-
-	async function navigateBack() {
-		// Check if we came from another document (mobile reference navigation)
-		const fromDocId = page.url.searchParams.get('fromDocId');
-		const fromDocType = page.url.searchParams.get('fromDocType');
-
-		if (fromDocId && fromDocType) {
-			// Navigate back to the document we came from
-			await navigateToEditDocument(fromDocId, fromDocType, false);
-		} else if (selectedDocumentType) {
-			// Navigate back to document list
-			const params = new SvelteURLSearchParams(page.url.searchParams);
-			params.set('docType', selectedDocumentType);
-			params.delete('docId');
-			params.delete('action');
-			params.delete('stack');
-			await goto(`/admin?${params.toString()}`, { replaceState: false });
-			mobileView = 'documents';
-		} else {
-			// Navigate back to home
-			const params = new SvelteURLSearchParams(page.url.searchParams);
-			params.delete('docType');
-			params.delete('docId');
-			params.delete('action');
-			params.delete('stack');
-			await goto(`/admin?${params.toString()}`, { replaceState: false });
-			mobileView = 'types';
-		}
-	}
-
-	// Handle opening reference in new editor panel
-	async function handleOpenReference(documentId: string, documentType: string) {
-		// On mobile, navigate to the referenced document directly
-		// Add fromDocId to track where we came from for proper back navigation
-		if (windowWidth < 620) {
-			const params = new SvelteURLSearchParams({
-				docId: documentId,
-				docType: documentType
-			});
-			// Track the document we're coming from
-			if (editingDocumentId) {
-				params.set('fromDocId', editingDocumentId);
-				if (selectedDocumentType) {
-					params.set('fromDocType', selectedDocumentType);
-				}
-			}
-			await goto(`/admin?${params.toString()}`, { replaceState: false });
-			mobileView = 'editor';
-			return;
-		}
-
-		// On desktop, add to editor stack
-		const newStack = [...editorStack, { documentId, documentType, isCreating: false }];
-
-		// Build stack param string: type1:id1,type2:id2,...
-		const stackParam = newStack.map((item) => `${item.documentType}:${item.documentId}`).join(',');
-
-		// Update URL with new stack
-		const params = new SvelteURLSearchParams(page.url.searchParams);
-		params.set('stack', stackParam);
-		await goto(`/admin?${params.toString()}`, { replaceState: false });
-
-		// Set the new editor as active
-		activeEditorIndex = newStack.length; // 0 = primary, so stack.length is the new editor
-	}
-
-	// Close editor from stack
-	async function handleCloseStackedEditor(index: number) {
-		const newStack = editorStack.slice(0, index);
-
-		// Update URL
-		const params = new SvelteURLSearchParams(page.url.searchParams);
-		if (newStack.length > 0) {
-			const stackParam = newStack
-				.map((item) => `${item.documentType}:${item.documentId}`)
-				.join(',');
-			params.set('stack', stackParam);
-		} else {
-			params.delete('stack');
-		}
-		await goto(`/admin?${params.toString()}`, { replaceState: false });
-
-		// Reset active editor to the last one
-		activeEditorIndex = Math.min(activeEditorIndex, newStack.length);
-	}
-
-	// Set active editor when clicking on a strip
-	function setActiveEditor(index: number) {
-		console.log('[AdminApp] setActiveEditor called:', {
-			previousIndex: activeEditorIndex,
-			newIndex: index,
-			editorStackLength: editorStack.length
-		});
-		activeEditorIndex = index;
-	}
-
-	function handleAutoSave(documentId: string, title: string) {
-		if (documentsList.length > 0) {
-			documentsList = documentsList.map((doc) =>
-				doc.id === documentId ? { ...doc, title: title } : doc
-			);
-		}
-	}
-
-	async function fetchDocumentForEditing(docId: string) {
-		loading = true;
-		error = null;
-
-		try {
-			const result = await documents.getById(docId);
-
-			if (result.success && result.data) {
-				const documentType = result.data.type;
-
-				if (documentsList.length === 0 || selectedDocumentType !== documentType) {
-					await fetchDocuments(documentType);
-				}
-
-				selectedDocumentType = documentType;
-			} else {
-				throw new Error(result.error || 'Failed to fetch document');
-			}
-		} catch (err) {
-			console.error('Failed to fetch document:', err);
-			error = err instanceof Error ? err.message : 'Failed to load document';
-			await goto('/admin', { replaceState: true });
-		} finally {
-			loading = false;
-		}
-	}
-
-	async function fetchDocuments(docType: string) {
-		loading = true;
-		error = null;
-
-		try {
-			const result = await documents.list({ docType, limit: 50 });
-
-			if (result.success && result.data) {
-				// Find schema for preview config
-				const schema = schemas.find((s) => s.name === docType);
-				const previewConfig = schema?.preview;
-
-				documentsList = result.data.map((doc: any) => {
-					const docData = doc.draftData || doc.publishedData || {};
-
-					// Use preview config if available
-					const title = previewConfig?.select?.title
-						? docData[previewConfig.select.title] || `Untitled`
-						: docData.title || `Untitled`;
-
-					const subtitle = previewConfig?.select?.subtitle
-						? docData[previewConfig.select.subtitle]
-						: undefined;
-
-					return {
-						id: doc.id,
-						title,
-						subtitle,
-						status: doc.status,
-						publishedAt: doc.publishedAt ? new Date(doc.publishedAt) : null,
-						updatedAt: doc.updatedAt ? new Date(doc.updatedAt) : null,
-						createdAt: doc.createdAt ? new Date(doc.createdAt) : null,
-						hasChanges:
-							doc.status === 'published' &&
-							doc.draftData !== null &&
-							JSON.stringify(doc.draftData) !== JSON.stringify(doc.publishedData)
-					};
-				});
-			} else {
-				throw new Error(result.error || 'Failed to fetch documents');
-			}
-		} catch (err) {
-			console.error('Failed to fetch documents:', err);
-			error = err instanceof Error ? err.message : 'Failed to load documents';
-			documentsList = [];
-		} finally {
-			loading = false;
-		}
-	}
-</script>
-
-<svelte:head>
-	<title>{activeTabState.value === 'structure' ? 'Content' : 'Vision'} - {title}</title>
-</svelte:head>
-
-<div class="flex h-full flex-col overflow-hidden">
-	<!-- Mobile breadcrumb navigation (< 620px) -->
-	{#if windowWidth < 620}
-		<div class="border-border bg-background border-b">
-			<div class="flex h-12 items-center px-4">
-				{#if mobileView === 'documents' && selectedDocumentType}
-					<button
-						onclick={async () => {
-							mobileView = 'types';
-							const params = new SvelteURLSearchParams(page.url.searchParams);
-							params.delete('docType');
-							params.delete('docId');
-							params.delete('action');
-							params.delete('stack');
-							await goto(`/admin?${params.toString()}`, { replaceState: false });
-						}}
-						class="text-muted-foreground hover:text-foreground flex items-center gap-2 text-sm"
-					>
-						<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="M15 19l-7-7 7-7"
-							/>
-						</svg>
-						Content
-					</button>
-					<span class="text-muted-foreground mx-2">/</span>
-					<span class="text-sm font-medium">
-						{(documentTypes.find((t) => t.name === selectedDocumentType)?.title ||
-							selectedDocumentType) + 's'}
-					</span>
-				{:else if mobileView === 'editor'}
-					<Button
-						onclick={navigateBack}
-						variant="ghost"
-						class="text-muted-foreground hover:text-foreground text-sm"
-					>
-						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M15 19l-7-7 7-7"
-							/>
-						</svg>
-					</Button>
-					<span class="ml-3 text-sm font-medium">
-						{selectedDocumentType
-							? documentTypes.find((t) => t.name === selectedDocumentType)?.title ||
-								selectedDocumentType
-							: 'Document'}
-					</span>
-				{:else}
-					<span class="text-sm font-medium">Content</span>
-				{/if}
-			</div>
-		</div>
-	{/if}
-
-	<!-- Main Content -->
-	<div class="flex-1 overflow-hidden">
-		<Tabs.Root value={activeTabState.value} onValueChange={handleTabChange} class="h-full">
-			<Tabs.Content value="structure" class="h-full overflow-hidden">
-				{#key `${currentView}-${selectedDocumentType}-${editingDocumentId}`}
-					<div class={windowWidth < 620 ? 'h-full w-full' : 'flex h-full w-full overflow-hidden'}>
-						{#if schemaError}
-							<div class="bg-destructive/5 flex flex-1 items-center justify-center p-8">
-								<div class="w-full max-w-2xl">
-									<Alert variant="destructive">
-										<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.704-.833-2.464 0L4.35 16.5c-.77.833.192 2.5 1.732 2.5z"
-											/>
-										</svg>
-										<AlertTitle>Schema Validation Error</AlertTitle>
-										<AlertDescription class="whitespace-pre-line">
-											{schemaError.message}
-										</AlertDescription>
-									</Alert>
-								</div>
-							</div>
-						{:else}
-							<!-- Types Panel -->
-							<div
-								class="border-r transition-all duration-200 {windowWidth < 620
-									? typesPanel === 'hidden'
-										? 'hidden'
-										: 'h-full w-screen'
-									: typesPanel} {typesPanel === 'hidden'
-									? 'hidden'
-									: 'block'} h-full overflow-hidden"
-							>
-								{#if typesPanel === 'w-[60px]'}
-									<button
-										onclick={() => setActiveEditor(-1)}
-										class="hover:bg-muted/30 flex h-full w-full flex-col transition-colors"
-										title="Click to expand content types"
-									>
-										<div class="flex flex-1 items-start justify-center p-2 pt-8 text-left">
-											<div
-												class="text-foreground rotate-90 transform whitespace-nowrap text-sm font-medium"
-											>
-												Content
-											</div>
-										</div>
-									</button>
-								{:else}
-									<div class="h-full overflow-y-auto">
-										{#if hasDocumentTypes}
-											{#each documentTypes as docType, index (index)}
-												<button
-													onclick={() => navigateToDocumentType(docType.name)}
-													class="hover:bg-muted/50 border-border group flex w-full items-center justify-between border-b p-3 text-left transition-colors first:border-t {selectedDocumentType ===
-													docType.name
-														? 'bg-muted/50'
-														: ''}"
-												>
-													<div class="flex items-center gap-3">
-														<div class="flex h-6 w-6 items-center justify-center">
-															<span class="text-muted-foreground">📄</span>
-														</div>
-														<div>
-															<h3 class="text-sm font-medium">{docType.title}s</h3>
-															{#if docType.description}
-																<p class="text-muted-foreground text-xs">{docType.description}</p>
-															{/if}
-														</div>
-													</div>
-													<div
-														class="text-muted-foreground group-hover:text-foreground transition-colors"
-													>
-														<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="M9 5l7 7-7 7"
-															/>
-														</svg>
-													</div>
-												</button>
-											{/each}
-										{:else}
-											<div class="p-6 text-center">
-												<div
-													class="bg-muted/50 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full"
-												>
-													<span class="text-muted-foreground text-xl">📄</span>
-												</div>
-												<h3 class="mb-2 font-medium">No content types found</h3>
-												<p class="text-muted-foreground mb-4 text-sm">
-													Get started by defining your first schema type
-												</p>
-												<p class="text-muted-foreground text-xs">
-													Add schemas in <code class="bg-muted rounded px-1.5 py-0.5 text-xs"
-														>src/lib/schemaTypes/</code
-													>
-												</p>
-											</div>
-										{/if}
-									</div>
-								{/if}
-							</div>
-
-							<!-- Documents Panel -->
-							{#if selectedDocumentType}
-								<div
-									class="flex h-full flex-col overflow-hidden border-r transition-all duration-200
-		              {!documentsPanelState.visible ? 'hidden' : ''}
-		              {windowWidth < 620 ? (documentsPanelState.visible ? 'w-screen' : 'hidden') : ''}
-		              {windowWidth >= 620 && documentsPanelState.width === 'full' ? 'w-full' : ''}
-		              {windowWidth >= 620 && documentsPanelState.width === 'normal' ? 'w-[350px]' : ''}
-		              {windowWidth >= 620 && documentsPanelState.width === 'compact' ? 'w-[60px]' : ''}
-		              {windowWidth >= 620 && documentsPanelState.width === 'flex' ? 'flex-1' : ''}
-		            "
-								>
-									{#if documentsPanelState.width === 'compact'}
-										<button
-											onclick={() => setActiveEditor(-2)}
-											class="hover:bg-muted/30 flex h-full w-full flex-col transition-colors"
-											title="Click to expand documents list"
-										>
-											<div class="flex flex-1 items-start justify-center p-2 pt-8 text-left">
-												<div class="text-foreground rotate-90 transform text-sm font-medium">
-													{(documentTypes.find((t) => t.name === selectedDocumentType)?.title ||
-														selectedDocumentType) + 's'}
-												</div>
-											</div>
-										</button>
-									{:else}
-										<div class="border-border bg-muted/20 border-b p-3">
-											<div class="flex items-center justify-between">
-												<div class="flex items-center gap-3">
-													{#if windowWidth > 620}
-														<!-- Desktop: Icon -->
-														<div class="flex h-6 w-6 items-center justify-center">
-															<span class="text-muted-foreground">📄</span>
-														</div>
-													{/if}
-													<div>
-														<h3 class="text-sm font-medium">
-															{(documentTypes.find((t) => t.name === selectedDocumentType)?.title ||
-																selectedDocumentType) + 's'}
-														</h3>
-														<p class="text-muted-foreground text-xs">
-															{documentsList.length} document{documentsList.length !== 1 ? 's' : ''}
-														</p>
-													</div>
-												</div>
-												{#if !isReadOnly}
-													<Button
-														size="sm"
-														variant="ghost"
-														onclick={() => navigateToCreateDocument(selectedDocumentType!)}
-														class="h-8 w-8 p-0"
-														title="Create new document"
-													>
-														<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="M12 4v16m8-8H4"
-															/>
-														</svg>
-													</Button>
-												{/if}
-											</div>
-										</div>
-
-										<div class="flex-1 overflow-y-auto">
-											{#if error}
-												<div class="p-4">
-													<Alert variant="destructive">
-														<AlertDescription>{error}</AlertDescription>
-													</Alert>
-												</div>
-											{:else if loading}
-												<div class="p-3 text-center">
-													<div class="text-muted-foreground text-sm">Loading...</div>
-												</div>
-											{:else if documentsList.length > 0}
-												{#each documentsList as doc, index (index)}
-													<button
-														onclick={() => navigateToEditDocument(doc.id, selectedDocumentType!)}
-														class="hover:bg-muted/50 border-border group flex w-full items-center justify-between border-b p-3 text-left transition-colors"
-													>
-														<div class="flex min-w-0 flex-1 items-center gap-3">
-															<div class="flex h-6 w-6 items-center justify-center">
-																<span class="text-muted-foreground">📄</span>
-															</div>
-															<div class="min-w-0 flex-1">
-																<h3 class="truncate text-sm font-medium">{doc.title}</h3>
-																{#if doc.subtitle}
-																	<p class="text-muted-foreground truncate text-xs">
-																		{doc.subtitle}
-																	</p>
-																{:else if doc.slug}
-																	<p class="text-muted-foreground text-xs">/{doc.slug}</p>
-																{:else if doc.status}
-																	<p class="text-muted-foreground text-xs">{doc.status}</p>
-																{/if}
-															</div>
-														</div>
-														<div class="text-muted-foreground text-xs">
-															{doc.updatedAt?.toLocaleDateString() || ''}
-														</div>
-													</button>
-												{/each}
-											{:else}
-												<div class="p-6 text-center">
-													<div
-														class="bg-muted/50 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full"
-													>
-														<span class="text-muted-foreground text-xl">📄</span>
-													</div>
-													<h3 class="mb-2 font-medium">No documents found</h3>
-													<p class="text-muted-foreground text-sm">
-														Create your first {selectedDocumentType} document using the + button above
-													</p>
-												</div>
-											{/if}
-										</div>
-									{/if}
-								</div>
-							{/if}
-
-							<!-- Primary Editor Panel -->
-							{#if primaryEditorState.visible}
-								{#if primaryEditorState.expanded}
-									<div
-										class="transition-all duration-200 {windowWidth < 620
-											? 'w-screen'
-											: 'flex-1'} h-full overflow-y-auto"
-										style={windowWidth >= 620 ? 'min-width: 0;' : ''}
-									>
-										<DocumentEditor
-											{schemas}
-											documentType={selectedDocumentType!}
-											documentId={editingDocumentId}
-											isCreating={isCreatingDocument}
-											onBack={navigateBack}
-											onOpenReference={handleOpenReference}
-											onSaved={async (docId) => {
-												if (selectedDocumentType) {
-													await fetchDocuments(selectedDocumentType);
-												}
-												navigateToEditDocument(docId, selectedDocumentType!);
-											}}
-											onAutoSaved={handleAutoSave}
-											onPublished={async (docId) => {
-												if (selectedDocumentType) {
-													await fetchDocuments(selectedDocumentType);
-												}
-											}}
-											onDeleted={async () => {
-												if (selectedDocumentType) {
-													await fetchDocuments(selectedDocumentType);
-													const params = new SvelteURLSearchParams(page.url.searchParams);
-													params.set('docType', selectedDocumentType);
-													params.delete('docId');
-													params.delete('action');
-													await goto(`/admin?${params.toString()}`, { replaceState: false });
-												} else {
-													const orgId = page.url.searchParams.get('orgId');
-													const url = orgId ? `/admin?orgId=${orgId}` : '/admin';
-													await goto(url, { replaceState: false });
-												}
-											}}
-											{isReadOnly}
-										/>
-									</div>
-								{:else}
-									<!-- Collapsed Primary Editor Strip -->
-									<button
-										onclick={() => setActiveEditor(0)}
-										class="hover:bg-muted/50 flex h-full w-[60px] flex-col border-l transition-colors"
-										title="Click to expand {selectedDocumentType}"
-									>
-										<div class="mt-7 flex flex-1 items-start justify-center p-2 pt-8 text-left">
-											<div class="text-foreground rotate-90 transform text-sm font-medium">
-												{selectedDocumentType
-													? selectedDocumentType.charAt(0).toUpperCase() +
-														selectedDocumentType.slice(1)
-													: ''}
-											</div>
-										</div>
-									</button>
-								{/if}
-							{/if}
-
-							<!-- Stacked Reference Editors -->
-							{#each editorStack as stackedEditor, index (index)}
-								{@const editorIndex = index + 1}
-								{@const isExpanded = layoutConfig.expandedIndices.includes(editorIndex)}
-
-								{#if isExpanded}
-									<div
-										class="h-full flex-1 overflow-y-auto border-l transition-all duration-200"
-										style="min-width: 0;"
-									>
-										<DocumentEditor
-											{schemas}
-											documentType={stackedEditor.documentType}
-											documentId={stackedEditor.documentId}
-											isCreating={stackedEditor.isCreating}
-											onBack={() => handleCloseStackedEditor(index)}
-											onOpenReference={handleOpenReference}
-											onSaved={async (docId) => {}}
-											onAutoSaved={() => {}}
-											onPublished={async (docId) => {}}
-											onDeleted={async () => {
-												handleCloseStackedEditor(index);
-											}}
-											{isReadOnly}
-										/>
-									</div>
-								{:else}
-									<!-- Collapsed Stacked Editor Strip -->
-									<button
-										onclick={() => setActiveEditor(editorIndex)}
-										class="hover:bg-muted/50 flex h-full w-[60px] flex-col border-l transition-colors"
-										title="Click to expand {stackedEditor.documentType}"
-									>
-										<div
-											class="-mt-2 flex h-full flex-1 items-start justify-center p-2 pt-8 text-left"
-										>
-											<div
-												class="text-foreground rotate-90 transform whitespace-nowrap text-sm font-medium"
-											>
-												{stackedEditor.documentType.charAt(0).toUpperCase() +
-													stackedEditor.documentType.slice(1)}
-											</div>
-										</div>
-									</button>
-								{/if}
-							{/each}
-						{/if}
-					</div>
-				{/key}
-			</Tabs.Content>
-
-			{#if graphqlSettings?.enableGraphiQL}
-				<Tabs.Content value="vision" class="m-0 h-full p-0">
-					<div class="bg-muted/10 flex h-full items-center justify-center">
-						<div class="space-y-4 text-center">
-							<div
-								class="bg-primary/10 mx-auto flex h-16 w-16 items-center justify-center rounded-full"
-							>
-								<svg
-									class="text-primary h-8 w-8"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-									/>
-								</svg>
-							</div>
-
-							<div>
-								<h3 class="mb-2 text-lg font-semibold">GraphQL Playground</h3>
-
-								<p class="text-muted-foreground mb-4">Query your CMS data with the GraphQL API</p>
-
-								<a
-									href={graphqlSettings.endpoint}
-									target="_blank"
-									class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-md px-4 py-2 transition-colors"
-								>
-									Open Playground
-
-									<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-										/>
-									</svg>
-								</a>
-							</div>
-						</div>
-					</div>
-				</Tabs.Content>
-			{/if}
-		</Tabs.Root>
-	</div>
-</div>