@aphexcms/cms-core 8.1.0 → 9.1.0

package/dist/components/AdminApp.svelte

@@ -9,7 +9,7 @@
 	import * as Popover from '@aphexcms/ui/shadcn/popover';
 	import * as Select from '@aphexcms/ui/shadcn/select';
 	import { page } from '$app/state';
-	import { goto, replaceState } from '$app/navigation';
+	import { goto } from '$app/navigation';
 	import { SvelteURLSearchParams } from 'svelte/reactivity';
 	import type { SchemaType } from '../types/index';
 	import type { UserSessionPreferences } from '../types/organization';
@@ -36,7 +36,6 @@
 	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 {
@@ -151,8 +150,9 @@
 	// Mobile navigation state (Sanity-style)
 	let mobileView = $state<'types' | 'documents' | 'editor'>('types');
 
-	// Window size reactivity
-	let windowWidth = $state(1024); // Default to desktop size
+	// Window size reactivity — default to mobile-safe width for SSR,
+	// immediately overwritten on mount.
+	let windowWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 375);
 
 	// Document editor state (moved before layoutConfig)
 	let editingDocumentId = $state<string | null>(null);
@@ -271,18 +271,15 @@
 	// 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 = 700; // Minimum width for ANY expanded editor
-	const COLLAPSED_WIDTH = 60; // Width of collapsed panels
-	const TYPES_EXPANDED = 350;
-	const DOCS_EXPANDED = 350;
+	// Layout: editors take precedence. When space is tight, panels collapse
+	// to 60px strips. Types panel always stays visible; docs list collapses
+	// first, then types.
+	const MIN_EDITOR_WIDTH = 650;
+	const COLLAPSED_WIDTH = 60;
+	const TYPES_WIDTH = 350;
+	const DOCS_WIDTH = 350;
 	let layoutConfig = $derived.by(() => {
-		const start = performance.now();
-		// Version panel is fixed-width (280px), not a full editor — deduct it
-		// from available space instead of counting it as an editor slot.
-		const totalEditors =
-			(currentView === 'editor' ? 1 : 0) +
-			(editorStack.length > 0 ? 1 : 0);
+		const totalEditors = (currentView === 'editor' ? 1 : 0) + (editorStack.length > 0 ? 1 : 0);
 
 		if (totalEditors === 0) {
 			return {
@@ -298,149 +295,58 @@
 			};
 		}
 
-		// 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 hasDocs = !!selectedDocumentType && !currentTypeIsSingleton;
 		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: boolean = typesActive || true; // Expand types if clicked, or by default
-		let docsExpanded: boolean = 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);
-				}
+		// Two editors open → always collapse both panels to maximize editing space
+		// Unless user explicitly clicked a collapsed strip to expand it
+		let typesExpanded = typesActive || totalEditors < 2;
+		let docsExpanded = docsActive || totalEditors < 2;
+
+		let panelsWidth =
+			(typesExpanded ? TYPES_WIDTH : COLLAPSED_WIDTH) +
+			(hasDocs ? (docsExpanded ? DOCS_WIDTH : COLLAPSED_WIDTH) : 0);
+		let editorSpace = windowWidth - panelsWidth;
+		let maxEditors = Math.floor(editorSpace / MIN_EDITOR_WIDTH);
+
+		// Single editor: collapse panels only if editor doesn't fit.
+		// Skip if user explicitly clicked a collapsed strip to expand it.
+		if (totalEditors === 1 && !typesActive && !docsActive) {
+			if (maxEditors < 1 && hasDocs) {
+				docsExpanded = false;
+				panelsWidth = TYPES_WIDTH + COLLAPSED_WIDTH;
+				editorSpace = windowWidth - panelsWidth;
+				maxEditors = Math.floor(editorSpace / MIN_EDITOR_WIDTH);
 			}
 
-			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.
-		// Types sidebar collapses first — the docs list is more useful when
-		// actively editing (shows siblings in the same collection).
-		if (maxExpandedEditors < totalEditors) {
-			typesWidth = COLLAPSED_WIDTH;
-			typesExpanded = false;
-			remainingWidth = windowWidth - typesWidth - docsWidth;
-			maxExpandedEditors = Math.floor(remainingWidth / MIN_EDITOR_WIDTH);
-		}
-
-		// If still not enough space, collapse docs list too
-		if (maxExpandedEditors < totalEditors) {
-			docsWidth = selectedDocumentType ? COLLAPSED_WIDTH : 0;
-			docsExpanded = false;
-			remainingWidth = windowWidth - typesWidth - docsWidth;
-			maxExpandedEditors = Math.floor(remainingWidth / MIN_EDITOR_WIDTH);
+			if (maxEditors < 1) {
+				typesExpanded = false;
+				panelsWidth = COLLAPSED_WIDTH + (hasDocs ? COLLAPSED_WIDTH : 0);
+				editorSpace = windowWidth - panelsWidth;
+				maxEditors = Math.floor(editorSpace / MIN_EDITOR_WIDTH);
+			}
 		}
 
-		// Always expand at least the active editor
-		if (maxExpandedEditors < 1) {
-			maxExpandedEditors = 1;
-		}
+		if (maxEditors < 1) maxEditors = 1;
 
-		// Expand editors around the active one symmetrically
+		// Build expanded editor indices, prioritizing active + most recent
 		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;
-					}
-				}
+		if (maxEditors > 1) {
+			for (let i = totalEditors - 1; i >= 0 && expandedIndices.length < maxEditors; i--) {
+				if (i !== validActiveIndex) expandedIndices.push(i);
 			}
 		}
 
-		const expandedCount = expandedIndices.length;
-
-		const end = performance.now();
-		cmsLogger.debug(
-			'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,
+			expandedCount: expandedIndices.length,
+			collapsedCount: totalEditors - expandedIndices.length,
 			typesCollapsed: !typesExpanded,
 			docsCollapsed: !docsExpanded,
 			expandedIndices,
@@ -530,7 +436,7 @@
 					});
 					organizationsMap = map;
 				}
-			} catch (err) {
+			} catch {
 				toast.error('Failed to fetch organizations');
 			}
 		}
@@ -616,7 +522,7 @@
 			if (historyParam === '1' && !showVersionPanel) {
 				showVersionPanel = true;
 				versionPanelDocId = stackParam
-					? editorStack[editorStack.length - 1]?.documentId ?? docId
+					? (editorStack[editorStack.length - 1]?.documentId ?? docId)
 					: docId;
 			} else if (!historyParam && showVersionPanel) {
 				showVersionPanel = false;
@@ -784,8 +690,8 @@
 	}
 
 	// Close version panel when navigating away
-	let prevDocType = $state(selectedDocumentType);
-	let prevDocId = $state(editingDocumentId);
+	let prevDocType = $state<string | null>(null);
+	let prevDocId = $state<string | null>(null);
 	let initialNavDone = $state(false);
 	$effect(() => {
 		if (selectedDocumentType !== prevDocType || editingDocumentId !== prevDocId) {
@@ -835,9 +741,7 @@
 		// the same array — replace the whole stack with the new pick.
 		// If clicking from within the stacked panel, push deeper.
 		const newStack =
-			activeEditorIndex === 0 && editorStack.length > 0
-				? [newEntry]
-				: [...editorStack, newEntry];
+			activeEditorIndex === 0 && editorStack.length > 0 ? [newEntry] : [...editorStack, newEntry];
 
 		// URL tracks the full chain for refresh support
 		const stackParam = newStack.map((item) => `${item.documentType}:${item.documentId}`).join(',');
@@ -1158,7 +1062,9 @@
 																{/if}
 															</div>
 															<span class="text-sm"
-																>{docType.singleton ? docType.title : pluralize(docType.title)}</span
+																>{docType.singleton
+																	? docType.title
+																	: pluralize(docType.title)}</span
 															>
 														</div>
 														<svg
@@ -1671,7 +1577,7 @@
 								{#if isExpanded}
 									<div
 										class="border-rule h-full flex-1 overflow-x-hidden overflow-y-auto border-l transition-all duration-200"
-										style="min-width: 0;{focusModeOn || showVersionPanel ? '' : ' max-width: 50%;'}"
+										style="min-width: 0;"
 									>
 										<DocumentEditor
 											{schemas}
@@ -1787,7 +1693,7 @@
 								<p class="text-muted-foreground mb-4">Query your CMS data with the GraphQL API</p>
 
 								<a
-									href={resolve(graphqlSettings.endpoint, {})}
+									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"
 								>

package/dist/components/AdminApp.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminApp.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AdminApp.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AA4BnE,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,aAAa,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5E,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,cAAc,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAA;KAAE,CAAC;IACxD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;CAChD;AA6iDF,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AdminApp.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AdminApp.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AA2BnE,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,aAAa,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5E,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,cAAc,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAA;KAAE,CAAC;IACxD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;CAChD;AA+8CF,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}