@aphexcms/cms-core 2.0.9 → 2.0.11

package/dist/components/AdminApp.svelte

@@ -17,6 +17,7 @@
 	import DocumentVersionPanel from './admin/DocumentVersionPanel.svelte';
 	import DocumentsSkeleton from './admin/DocumentsSkeleton.svelte';
 	import MediaBrowser from './admin/MediaBrowser.svelte';
+	import ConfirmDialogHost from './admin/confirm-dialog/ConfirmDialogHost.svelte';
 	import { documents, organizations } from '../api/index';
 	import {
 		FileText,
@@ -34,6 +35,8 @@
 	import { cmsLogger } from '../utils/logger';
 	import { pluralize } from '../utils/pluralize';
 	import { toast } from 'svelte-sonner';
+	import { resolve } from '$app/paths';
+	import { setPermissionsContext } from '../permissions-context.svelte';
 
 	interface Props {
 		schemas: SchemaType[];
@@ -42,6 +45,14 @@
 		title?: string;
 		graphqlSettings?: { endpoint: string; enableGraphiQL: boolean } | null;
 		isReadOnly?: boolean;
+		/**
+		 * Capabilities resolved for the current session. Used for per-action UI
+		 * gating. When absent, all actions are shown and the server remains the
+		 * enforcement surface.
+		 */
+		capabilities?: string[];
+		/** Effective organization role name, for role-list style checks. */
+		rbacRole?: string | null;
 		activeTab?: { value: 'structure' | 'vision' | 'media' };
 		handleTabChange: (value: string) => void;
 		userPreferences?: UserSessionPreferences | null;
@@ -54,27 +65,68 @@
 		title = 'Aphex CMS',
 		graphqlSettings = null,
 		isReadOnly = false,
+		capabilities = [],
+		rbacRole = null,
 		activeTab = { value: 'structure' } as { value: 'structure' | 'vision' | 'media' },
 		handleTabChange = () => {},
 		userPreferences = null
 	}: Props = $props();
 
+	// Publish capabilities to every descendant (DocumentEditor, fields, etc)
+	// via Svelte context. Using a getter closure so prop reactivity propagates:
+	// if the parent swaps the capabilities array (e.g. role change mid-session)
+	// every `perms.can()` call in the subtree picks it up on next read.
+	const perms = setPermissionsContext(
+		() => capabilities,
+		() => rbacRole
+	);
+
 	// Keep a state of the organization id
 	let currentOrgId = $state<string | null>(page.url.searchParams.get('orgId'));
 
-	// Merge document types with schema icons (schemas have icons, server data doesn't)
+	// Merge document types with schema icons (schemas have icons, server data doesn't),
+	// then filter out any schemas the caller can't read. Mirrors the server check:
+	// an `access.read` list on a schema is an allowlist of role names (built-in
+	// or custom); absence of a list means "whoever can read documents at all".
 	const documentTypes = $derived(
-		documentTypesFromServer.map((docType) => {
-			const schema = schemas.find((s) => s.name === docType.name);
-			return {
-				...docType,
-				icon: schema?.icon
-			};
-		})
+		documentTypesFromServer
+			.map((docType) => {
+				const schema = schemas.find((s) => s.name === docType.name);
+				return {
+					...docType,
+					icon: schema?.icon,
+					group: schema?.group,
+					access: schema?.access
+				};
+			})
+			.filter((docType) => {
+				const readList = docType.access?.read;
+				if (!readList) return true; // no list = open to any reader
+				// Functions (policy-based access) can't be evaluated on the client
+				// without a target doc — show them and let the server enforce.
+				if (typeof readList === 'function') return true;
+				const role = perms.role;
+				return role !== null && readList.includes(role);
+			})
 	);
 
 	const hasDocumentTypes = $derived(documentTypes.length > 0);
 
+	// Bucket document types by their `group` property. Ungrouped types sit in a
+	// leading null bucket; named groups follow in first-seen order.
+	const groupedDocumentTypes = $derived.by(() => {
+		const buckets = new Map<string | null, typeof documentTypes>();
+		buckets.set(null, []);
+		for (const dt of documentTypes) {
+			const key = dt.group ?? null;
+			if (!buckets.has(key)) buckets.set(key, []);
+			buckets.get(key)!.push(dt);
+		}
+		return Array.from(buckets.entries())
+			.filter(([, items]) => items.length > 0)
+			.map(([name, items]) => ({ name, items }));
+	});
+
 	// Client-side routing state
 	let currentView = $state<'dashboard' | 'documents' | 'editor'>('dashboard');
 	let selectedDocumentType = $state<string | null>(null);
@@ -107,7 +159,11 @@
 	// Version history panel state
 	let showVersionPanel = $state(false);
 	let versionPanelDocId = $state<string | null>(null);
-	let versionPreviewData = $state<{ versionNumber: number; data: Record<string, any>; eventType: string } | null>(null);
+	let versionPreviewData = $state<{
+		versionNumber: number;
+		data: Record<string, any>;
+		eventType: string;
+	} | null>(null);
 
 	// Documents list sorting state
 	let sortDropdownOpen = $state(false);
@@ -169,14 +225,15 @@
 	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 MIN_EDITOR_WIDTH = 700; // 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 + (showVersionPanel ? 1 : 0);
+		const totalEditors =
+			(currentView === 'editor' ? 1 : 0) + editorStack.length + (showVersionPanel ? 1 : 0);
 
 		if (totalEditors === 0) {
 			return {
@@ -431,10 +488,19 @@
 			cmsLogger.debug('[URL Effect]', 'Branch: CREATE');
 			currentView = 'editor';
 			mobileView = 'editor';
-			selectedDocumentType = docType;
 			isCreatingDocument = true;
 			editingDocumentId = null;
 			editorStack = [];
+			if (selectedDocumentType !== docType) {
+				docCurrentPage = 1;
+				selectedDocumentType = docType;
+				fetchDocuments(docType);
+			}
+			// Note: no fallback refetch when docsList is empty — empty is a valid
+			// steady state (type has no records). fetchDocuments reassigns the
+			// list (new identity), which retriggers this effect; any "refetch if
+			// empty" guard loops forever. If you need a manual refresh, use a
+			// button, not an effect.
 		} else if (docId) {
 			cmsLogger.debug('[URL Effect]', 'Branch: EDIT (docId)');
 			currentView = 'editor';
@@ -476,8 +542,8 @@
 			}
 
 			if (docType) {
-				selectedDocumentType = docType;
-				if (documentsList.length === 0 || selectedDocumentType !== docType) {
+				if (selectedDocumentType !== docType) {
+					selectedDocumentType = docType;
 					fetchDocuments(docType);
 				}
 			} else {
@@ -521,6 +587,9 @@
 	});
 
 	async function navigateToDocumentType(docType: string) {
+		if (activeTab.value !== 'structure') {
+			handleTabChange('structure');
+		}
 		const params = new SvelteURLSearchParams(page.url.searchParams);
 		params.set('docType', docType);
 		params.delete('docId');
@@ -625,7 +694,19 @@
 			return;
 		}
 
-		// On desktop, add to editor stack
+		// On desktop, add to editor stack — unless the document is already open somewhere
+		if (editingDocumentId === documentId) {
+			// Already open as the primary editor — just focus it
+			activeEditorIndex = 0;
+			return;
+		}
+		const existingIndex = editorStack.findIndex((item) => item.documentId === documentId);
+		if (existingIndex !== -1) {
+			// Already open in the stack — focus that editor (stack index 0 = activeEditorIndex 1)
+			activeEditorIndex = existingIndex + 1;
+			return;
+		}
+
 		const newStack = [...editorStack, { documentId, documentType, isCreating: false }];
 
 		// Build stack param string: type1:id1,type2:id2,...
@@ -816,8 +897,10 @@
 					</button>
 					<span class="text-muted-foreground mx-2">/</span>
 					<span class="text-sm font-medium">
-						{pluralize(documentTypes.find((t) => t.name === selectedDocumentType)?.title ||
-							selectedDocumentType)}
+						{pluralize(
+							documentTypes.find((t) => t.name === selectedDocumentType)?.title ||
+								selectedDocumentType
+						)}
 					</span>
 				{:else if mobileView === 'editor'}
 					<Button
@@ -875,7 +958,7 @@
 						{:else}
 							<!-- Types Panel -->
 							<div
-								class="border-r transition-all duration-200 {windowWidth < 620
+								class="border-rule border-r transition-all duration-200 {windowWidth < 620
 									? typesPanel === 'hidden'
 										? 'hidden'
 										: 'h-full w-screen'
@@ -886,12 +969,12 @@
 								{#if typesPanel === 'w-[60px]'}
 									<button
 										onclick={() => setActiveEditor(-1)}
-										class="hover:bg-muted/30 flex h-full w-full flex-col transition-colors"
+										class="hover:bg-muted/30 flex h-full w-full cursor-pointer 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 text-sm font-medium whitespace-nowrap"
+												class="text-foreground -mt-2 text-sm font-medium whitespace-nowrap [writing-mode:vertical-rl]"
 											>
 												Content
 											</div>
@@ -901,46 +984,55 @@
 									<div class="h-full overflow-y-auto p-3">
 										{#if hasDocumentTypes}
 											<h2
-												class="text-muted-foreground mb-2 hidden px-2 text-sm font-medium sm:block"
+												class="text-muted-foreground border-rule mt-2 mb-3 hidden px-2 pb-3 text-sm font-medium sm:block sm:border-b"
 											>
 												Content
 											</h2>
-											{#each documentTypes as docType, index (index)}
-												<button
-													onclick={() => navigateToDocumentType(docType.name)}
-													class="hover:bg-muted/50 group flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-2.5 text-left transition-colors {selectedDocumentType ===
-													docType.name
-														? 'bg-muted/50'
-														: ''}"
-													title={docType.description || ''}
-												>
-													<div class="flex items-center gap-2">
-														<div
-															class="text-muted-foreground flex h-5 w-5 items-center justify-center"
-														>
-															{#if docType.icon}
-																{@const Icon = docType.icon}
-																<Icon class="h-4 w-4" />
-															{:else}
-																<FileText class="h-4 w-4" />
-															{/if}
-														</div>
-														<span class="text-sm">{pluralize(docType.title)}</span>
+											{#each groupedDocumentTypes as bucket (bucket.name ?? '__ungrouped__')}
+												{#if bucket.name}
+													<div
+														class="text-muted-foreground mt-3 mb-1 px-2 text-xs font-semibold tracking-wide uppercase first:mt-0"
+													>
+														{bucket.name}
 													</div>
-													<svg
-														class="text-muted-foreground h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke="currentColor"
+												{/if}
+												{#each bucket.items as docType (docType.name)}
+													<button
+														onclick={() => navigateToDocumentType(docType.name)}
+														class="hover:bg-muted/50 group flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-2.5 text-left transition-colors {selectedDocumentType ===
+														docType.name
+															? 'bg-muted/50'
+															: ''}"
+														title={docType.description || ''}
 													>
-														<path
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															stroke-width="2"
-															d="M9 5l7 7-7 7"
-														/>
-													</svg>
-												</button>
+														<div class="flex items-center gap-2">
+															<div
+																class="text-muted-foreground flex h-5 w-5 items-center justify-center"
+															>
+																{#if docType.icon}
+																	{@const Icon = docType.icon}
+																	<Icon class="h-4 w-4" />
+																{:else}
+																	<FileText class="h-4 w-4" />
+																{/if}
+															</div>
+															<span class="text-sm">{pluralize(docType.title)}</span>
+														</div>
+														<svg
+															class="text-muted-foreground h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
+															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>
+													</button>
+												{/each}
 											{/each}
 										{:else}
 											<div class="p-6 text-center">
@@ -967,7 +1059,7 @@
 							<!-- Documents Panel -->
 							{#if selectedDocumentType}
 								<div
-									class="flex h-full flex-col overflow-hidden border-r transition-all duration-200
+									class="border-rule 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' : ''}
@@ -979,13 +1071,17 @@
 									{#if documentsPanelState.width === 'compact'}
 										<button
 											onclick={() => setActiveEditor(-2)}
-											class="hover:bg-muted/30 flex h-full w-full flex-col transition-colors"
+											class="hover:bg-muted/30 flex h-full w-full cursor-pointer 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">
-													{pluralize(documentTypes.find((t) => t.name === selectedDocumentType)?.title ||
-														selectedDocumentType)}
+												<div
+													class="text-foreground -mt-2 text-sm font-medium whitespace-nowrap [writing-mode:vertical-rl]"
+												>
+													{pluralize(
+														documentTypes.find((t) => t.name === selectedDocumentType)?.title ||
+															selectedDocumentType
+													)}
 												</div>
 											</div>
 										</button>
@@ -1017,7 +1113,7 @@
 													</div>
 												</div>
 												<div class="flex items-center gap-1">
-													{#if !isReadOnly}
+													{#if perms.can('document.create')}
 														<Button
 															size="sm"
 															variant="ghost"
@@ -1049,7 +1145,7 @@
 																	{...props}
 																	size="sm"
 																	variant="ghost"
-																	class="h-8 w-8 p-0"
+																	class="h-8 w-8 cursor-pointer p-0"
 																	title="Sort documents"
 																>
 																	<Ellipsis class="h-4 w-4" />
@@ -1162,7 +1258,7 @@
 													{@const isActive = editingDocumentId === doc.id}
 													<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 {isActive
+														class="hover:bg-muted/50 border-border group flex w-full cursor-pointer items-center justify-between border-b p-3 text-left transition-colors {isActive
 															? 'bg-muted/50'
 															: ''}"
 													>
@@ -1188,13 +1284,37 @@
 																	</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 class="flex items-center gap-2">
+															<span class="text-muted-foreground text-xs">
+																{doc.updatedAt?.toLocaleDateString() || ''}
+															</span>
+															<div class="flex items-center gap-1">
+																{#if doc.status === 'published'}
+																	{#if doc.hasChanges}
+																		<span
+																			class="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"
+																			title="Unpublished changes"
+																		></span>
+																	{/if}
+																	<span
+																		class="h-1.5 w-1.5 shrink-0 rounded-full bg-green-500"
+																		title="Published"
+																	></span>
+																{:else if doc.status === 'unpublished'}
+																	<span
+																		class="bg-muted-foreground/60 h-1.5 w-1.5 shrink-0 rounded-full"
+																		title="Unpublished"
+																	></span>
+																{:else}
+																	<span
+																		class="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"
+																		title="Draft"
+																	></span>
+																{/if}
+															</div>
 														</div>
 													</button>
 												{/each}
@@ -1287,75 +1407,100 @@
 
 							<!-- 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}
-											onOpenVersionHistory={handleOpenVersionHistory}
-											externalVersionPreview={versionPreviewData}
-											onSaved={async (docId) => {
-												if (selectedDocumentType) {
-													await fetchDocuments(selectedDocumentType);
-												}
-												// For first-time creation, just update URL without changing props
-												// This prevents DocumentEditor from reloading and keeps focus
-												if (isCreatingDocument) {
-													const params = new SvelteURLSearchParams(page.url.searchParams);
-													params.set('docId', docId);
-													if (selectedDocumentType) params.set('docType', selectedDocumentType);
-													params.delete('action');
-													replaceState(`/admin?${params.toString()}`, { ...page.state });
-
-													// Update local state immediately to prevent creating duplicate documents
-													isCreatingDocument = false;
-													editingDocumentId = docId;
-												} else {
-													// For subsequent saves, use normal navigation
-													navigateToEditDocument(docId, selectedDocumentType!);
-												}
-											}}
-											onAutoSaved={handleAutoSave}
-											onPublished={async (_) => {
-												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}
+								<div
+									class="transition-all duration-200 {windowWidth < 620
+										? 'w-screen'
+										: 'flex-1'} h-full overflow-x-hidden overflow-y-auto {primaryEditorState.expanded
+										? ''
+										: 'hidden'}"
+									style={windowWidth >= 620 ? 'min-width: 0;' : ''}
+								>
+									<DocumentEditor
+										{schemas}
+										documentType={selectedDocumentType!}
+										documentId={editingDocumentId}
+										isCreating={isCreatingDocument}
+										onBack={navigateBack}
+										onOpenReference={handleOpenReference}
+										onOpenVersionHistory={handleOpenVersionHistory}
+										externalVersionPreview={versionPanelDocId === editingDocumentId
+											? versionPreviewData
+											: null}
+										onSaved={async (docId) => {
+											if (selectedDocumentType) {
+												await fetchDocuments(selectedDocumentType);
+											}
+											// For first-time creation, update URL and local state.
+											// Use goto with replaceState:true so page.url stays in sync —
+											// raw replaceState() from $app/navigation updates the URL bar
+											// but leaves page.url.searchParams stale, which breaks any
+											// subsequent navigation that reads from it (e.g. opening a
+											// stacked reference editor) because the old ?action=create
+											// gets carried forward.
+											if (isCreatingDocument) {
+												// Update local state FIRST so the URL Effect's EDIT branch
+												// sees consistent values when goto fires it.
+												isCreatingDocument = false;
+												editingDocumentId = docId;
+
+												const params = new SvelteURLSearchParams(page.url.searchParams);
+												params.set('docId', docId);
+												if (selectedDocumentType) params.set('docType', selectedDocumentType);
+												params.delete('action');
+												await goto(`/admin?${params.toString()}`, {
+													replaceState: true,
+													keepFocus: true,
+													noScroll: true
+												});
+											} else {
+												// For subsequent saves, use normal navigation
+												navigateToEditDocument(docId, selectedDocumentType!);
+											}
+										}}
+										onAutoSaved={handleAutoSave}
+										onPublished={async (_) => {
+											if (selectedDocumentType) {
+												await fetchDocuments(selectedDocumentType);
+											}
+										}}
+										onUnpublished={async (_) => {
+											if (selectedDocumentType) {
+												await fetchDocuments(selectedDocumentType);
+											}
+										}}
+										onRestored={async (_) => {
+											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>
+								{#if !primaryEditorState.expanded}
 									<!-- Collapsed Primary Editor Strip -->
 									<button
 										onclick={() => setActiveEditor(0)}
-										class="hover:bg-muted/50 flex h-full w-[60px] flex-col border-l transition-colors"
+										class="border-rule hover:bg-muted/50 flex h-full w-[60px] cursor-pointer 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">
+										<div class="flex flex-1 items-start justify-center p-2 pt-8 text-left">
+											<div
+												class="text-foreground -mt-2 text-sm font-medium whitespace-nowrap [writing-mode:vertical-rl]"
+											>
 												{selectedDocumentType
 													? selectedDocumentType.charAt(0).toUpperCase() +
 														selectedDocumentType.slice(1)
@@ -1373,7 +1518,7 @@
 
 								{#if isExpanded}
 									<div
-										class="h-full flex-1 overflow-y-auto border-l transition-all duration-200"
+										class="border-rule h-full flex-1 overflow-x-hidden overflow-y-auto border-l transition-all duration-200"
 										style="min-width: 0;"
 									>
 										<DocumentEditor
@@ -1384,9 +1529,26 @@
 											onBack={() => handleCloseStackedEditor(index)}
 											onOpenReference={handleOpenReference}
 											onOpenVersionHistory={handleOpenVersionHistory}
-											onSaved={async (_) => {}}
+											externalVersionPreview={versionPanelDocId === stackedEditor.documentId
+												? versionPreviewData
+												: null}
+											onSaved={async () => {}}
 											onAutoSaved={() => {}}
-											onPublished={async (_) => {}}
+											onPublished={async () => {
+												if (selectedDocumentType) {
+													await fetchDocuments(selectedDocumentType);
+												}
+											}}
+											onUnpublished={async () => {
+												if (selectedDocumentType) {
+													await fetchDocuments(selectedDocumentType);
+												}
+											}}
+											onRestored={async () => {
+												if (selectedDocumentType) {
+													await fetchDocuments(selectedDocumentType);
+												}
+											}}
 											onDeleted={async () => {
 												handleCloseStackedEditor(index);
 											}}
@@ -1397,14 +1559,12 @@
 									<!-- Collapsed Stacked Editor Strip -->
 									<button
 										onclick={() => setActiveEditor(editorIndex)}
-										class="hover:bg-muted/50 flex h-full w-[60px] flex-col border-l transition-colors"
+										class="border-rule hover:bg-muted/50 flex h-full w-[60px] cursor-pointer 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="flex h-full flex-1 items-start justify-center p-2 pt-8 text-left">
 											<div
-												class="text-foreground rotate-90 transform text-sm font-medium whitespace-nowrap"
+												class="text-foreground text-sm font-medium whitespace-nowrap [writing-mode:vertical-rl]"
 											>
 												{stackedEditor.documentType.charAt(0).toUpperCase() +
 													stackedEditor.documentType.slice(1)}
@@ -1418,12 +1578,14 @@
 						<!-- Version History Panel -->
 						{#if showVersionPanel && versionPanelDocId}
 							<div
-								class="h-full w-[280px] min-w-[250px] overflow-y-auto border-l transition-all duration-200"
+								class="border-rule h-full w-[280px] min-w-[250px] overflow-y-auto border-l transition-all duration-200"
 							>
 								<DocumentVersionPanel
 									documentId={versionPanelDocId}
 									onClose={handleCloseVersionPanel}
-									onPreviewVersion={(v) => { versionPreviewData = v; }}
+									onPreviewVersion={(v) => {
+										versionPreviewData = v;
+									}}
 									onRestored={async () => {
 										versionPreviewData = null;
 										if (selectedDocumentType) {
@@ -1465,7 +1627,7 @@
 								<p class="text-muted-foreground mb-4">Query your CMS data with the GraphQL API</p>
 
 								<a
-									href={graphqlSettings.endpoint}
+									href={resolve(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"
 								>
@@ -1492,3 +1654,5 @@
 		</Tabs.Root>
 	</div>
 </div>
+
+<ConfirmDialogHost />