@questpie/admin 2.0.0 → 3.0.1

package/dist/client/views/layout/admin-layout.mjs

@@ -6,7 +6,8 @@ import { BreadcrumbProvider, useCurrentBreadcrumbs } from "../../contexts/breadc
 import { GlobalSearch } from "../common/global-search.mjs";
 import { AdminSidebar } from "./admin-sidebar.mjs";
 import { AdminTopbar } from "./admin-topbar.mjs";
-import * as React$1 from "react";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/views/layout/admin-layout.tsx
@@ -21,124 +22,281 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Automatically reads from AdminProvider context when props are not provided.
 */
 function useLayoutProps(props) {
-	const storeNavigation = useAdminStore((s) => s.navigation);
-	const storeBrandName = useAdminStore((s) => s.brandName);
-	const storeNavigate = useAdminStore((s) => s.navigate);
-	return {
-		navigation: props.navigation ?? storeNavigation,
-		brandName: props.brandName ?? storeBrandName,
-		navigate: props.navigate ?? storeNavigate
-	};
+	const $ = c(3);
+	const storeBrandName = useAdminStore(_temp);
+	const storeNavigate = useAdminStore(_temp2);
+	const t0 = props.brandName ?? storeBrandName;
+	const t1 = props.navigate ?? storeNavigate;
+	let t2;
+	if ($[0] !== t0 || $[1] !== t1) {
+		t2 = {
+			brandName: t0,
+			navigate: t1
+		};
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
 }
 /**
 * Topbar wrapper that reads breadcrumbs from context
 */
-function AdminTopbarWithBreadcrumbs(props) {
-	const breadcrumbs = useCurrentBreadcrumbs();
-	return /* @__PURE__ */ jsx(AdminTopbar, {
-		...props,
-		breadcrumbs
-	});
+function _temp2(s_0) {
+	return s_0.navigate;
+}
+function _temp(s) {
+	return s.brandName;
 }
+const AdminTopbarWithBreadcrumbs = React.memo(function AdminTopbarWithBreadcrumbs$1(props) {
+	const $ = c(3);
+	const breadcrumbs = useCurrentBreadcrumbs();
+	let t0;
+	if ($[0] !== breadcrumbs || $[1] !== props) {
+		t0 = /* @__PURE__ */ jsx(AdminTopbar, {
+			...props,
+			breadcrumbs
+		});
+		$[0] = breadcrumbs;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+});
 /**
 * AdminLayout Component
 *
-* When used inside AdminProvider, navigation and brandName are automatically
+* When used inside AdminProvider, brandName is automatically
 * read from context if not provided as props.
+* Navigation is driven by server-side sidebar configuration.
 *
 * @example
 * ```tsx
-* // With AdminProvider (automatic)
 * <AdminProvider admin={admin} client={client}>
 *   <AdminLayout LinkComponent={Link} activeRoute="/admin/posts">
 *     <Outlet />
 *   </AdminLayout>
 * </AdminProvider>
-*
-* // Without AdminProvider (manual)
-* <AdminLayout
-*   navigation={buildNavigation(admin)}
-*   LinkComponent={Link}
-*   activeRoute="/admin/posts"
-*   brandName="My CMS"
-* >
-*   <Outlet />
-* </AdminLayout>
 * ```
 */
-function AdminLayout({ navigation: navigationProp, LinkComponent, activeRoute, basePath = "/admin", brandName: brandNameProp, sidebarCollapsed: sidebarCollapsedProp = false, children, className, sidebarProps, header, footer, navigate: navigateProp, theme = "system", setTheme, showThemeToggle, toasterProps, layoutMode = "default" }) {
+function AdminLayout(t0) {
+	const $ = c(55);
+	const { LinkComponent, activeRoute, basePath: t1, brandName: brandNameProp, sidebarCollapsed: t2, children, className, sidebarProps, header, footer, navigate: navigateProp, theme: t3, setTheme, showThemeToggle, toasterProps, layoutMode: t4 } = t0;
+	const basePath = t1 === void 0 ? "/admin" : t1;
+	const sidebarCollapsedProp = t2 === void 0 ? false : t2;
+	const theme = t3 === void 0 ? "system" : t3;
+	const layoutMode = t4 === void 0 ? "wide" : t4;
 	const shouldShowHeader = !!header;
 	const shouldShowFooter = !!footer;
-	const { navigation, brandName, navigate } = useLayoutProps({
-		navigation: navigationProp,
-		brandName: brandNameProp,
-		navigate: navigateProp
-	});
-	const [isSearchOpen, setIsSearchOpen] = React$1.useState(false);
-	React$1.useEffect(() => {
-		const down = (e) => {
-			if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-				e.preventDefault();
-				setIsSearchOpen(true);
-			}
+	let t5;
+	if ($[0] !== brandNameProp || $[1] !== navigateProp) {
+		t5 = {
+			brandName: brandNameProp,
+			navigate: navigateProp
+		};
+		$[0] = brandNameProp;
+		$[1] = navigateProp;
+		$[2] = t5;
+	} else t5 = $[2];
+	const { brandName, navigate } = useLayoutProps(t5);
+	const [isSearchOpen, setIsSearchOpen] = React.useState(false);
+	let t6;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => setIsSearchOpen(true);
+		$[3] = t6;
+	} else t6 = $[3];
+	const openSearch = t6;
+	let t7;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => setIsSearchOpen(false);
+		$[4] = t7;
+	} else t7 = $[4];
+	const closeSearch = t7;
+	let t8;
+	let t9;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => {
+			const down = (e) => {
+				if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+					e.preventDefault();
+					setIsSearchOpen(true);
+				}
+			};
+			document.addEventListener("keydown", down);
+			return () => document.removeEventListener("keydown", down);
 		};
-		document.addEventListener("keydown", down);
-		return () => document.removeEventListener("keydown", down);
-	}, []);
-	return /* @__PURE__ */ jsx(BreadcrumbProvider, { children: /* @__PURE__ */ jsxs("div", {
-		className: cn("min-h-screen bg-background bg-grid-quest", className),
-		children: [
-			/* @__PURE__ */ jsx(GlobalSearch, {
-				isOpen: isSearchOpen,
-				onClose: () => setIsSearchOpen(false),
-				navigate,
-				basePath
-			}),
-			/* @__PURE__ */ jsxs(SidebarProvider, {
-				defaultOpen: !sidebarCollapsedProp,
-				className: "mx-auto max-w-[1920px] border-x border-border/40 h-svh overflow-hidden",
-				children: [/* @__PURE__ */ jsx(AdminSidebar, {
-					navigation: navigationProp,
-					LinkComponent,
-					activeRoute,
-					basePath,
-					brandName: brandNameProp,
-					...sidebarProps
-				}), /* @__PURE__ */ jsxs(SidebarInset, {
-					className: "flex h-svh flex-col",
-					children: [
-						/* @__PURE__ */ jsx(AdminTopbarWithBreadcrumbs, {
-							onSearchOpen: () => setIsSearchOpen(true),
-							theme,
-							setTheme,
-							showThemeToggle
-						}),
-						shouldShowHeader && header && /* @__PURE__ */ jsx("header", {
-							className: "border-b",
-							children: header
-						}),
-						/* @__PURE__ */ jsx("main", {
-							className: "flex-1 overflow-y-auto",
-							children: /* @__PURE__ */ jsx("div", {
-								className: cn("mx-auto", layoutMode === "default" && "max-w-6xl p-5 md:p-8 lg:p-10", layoutMode === "wide" && "max-w-7xl p-5 md:p-8 lg:p-10", layoutMode === "full" && "max-w-full p-4 md:p-6", layoutMode === "immersive" && "max-w-full p-0"),
-								children
-							})
-						}),
-						shouldShowFooter && footer && /* @__PURE__ */ jsx("footer", {
-							className: "border-t",
-							children: footer
-						})
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsx(Toaster, {
-				theme,
-				...toasterProps
+		t9 = [];
+		$[5] = t8;
+		$[6] = t9;
+	} else {
+		t8 = $[5];
+		t9 = $[6];
+	}
+	React.useEffect(t8, t9);
+	let t10;
+	if ($[7] !== className) {
+		t10 = cn("qa-admin-layout bg-background min-h-screen", className);
+		$[7] = className;
+		$[8] = t10;
+	} else t10 = $[8];
+	let t11;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx("a", {
+			href: "#main-content",
+			className: "qa-admin-layout__skip-link focus:bg-primary focus:text-primary-foreground sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:text-sm focus:font-medium",
+			children: "Skip to main content"
+		});
+		$[9] = t11;
+	} else t11 = $[9];
+	let t12;
+	if ($[10] !== basePath || $[11] !== isSearchOpen || $[12] !== navigate) {
+		t12 = isSearchOpen && /* @__PURE__ */ jsx(GlobalSearch, {
+			isOpen: isSearchOpen,
+			onClose: closeSearch,
+			navigate,
+			basePath
+		});
+		$[10] = basePath;
+		$[11] = isSearchOpen;
+		$[12] = navigate;
+		$[13] = t12;
+	} else t12 = $[13];
+	const t13 = !sidebarCollapsedProp;
+	let t14;
+	if ($[14] !== LinkComponent || $[15] !== activeRoute || $[16] !== basePath || $[17] !== brandName || $[18] !== sidebarProps) {
+		t14 = /* @__PURE__ */ jsx(AdminSidebar, {
+			LinkComponent,
+			activeRoute,
+			basePath,
+			brandName,
+			...sidebarProps
+		});
+		$[14] = LinkComponent;
+		$[15] = activeRoute;
+		$[16] = basePath;
+		$[17] = brandName;
+		$[18] = sidebarProps;
+		$[19] = t14;
+	} else t14 = $[19];
+	let t15;
+	if ($[20] !== setTheme || $[21] !== showThemeToggle || $[22] !== theme) {
+		t15 = /* @__PURE__ */ jsx(AdminTopbarWithBreadcrumbs, {
+			onSearchOpen: openSearch,
+			theme,
+			setTheme,
+			showThemeToggle
+		});
+		$[20] = setTheme;
+		$[21] = showThemeToggle;
+		$[22] = theme;
+		$[23] = t15;
+	} else t15 = $[23];
+	let t16;
+	if ($[24] !== header || $[25] !== shouldShowHeader) {
+		t16 = shouldShowHeader && header && /* @__PURE__ */ jsx("header", {
+			className: "qa-admin-layout__header border-b",
+			children: header
+		});
+		$[24] = header;
+		$[25] = shouldShowHeader;
+		$[26] = t16;
+	} else t16 = $[26];
+	const t17 = layoutMode === "default" && "mx-auto max-w-5xl p-3 md:p-4 lg:p-6";
+	const t18 = layoutMode === "wide" && "p-3 md:p-4 lg:p-6";
+	const t19 = layoutMode === "full" && "p-2 md:p-3";
+	const t20 = layoutMode === "immersive" && "p-0";
+	let t21;
+	if ($[27] !== t17 || $[28] !== t18 || $[29] !== t19 || $[30] !== t20) {
+		t21 = cn("qa-admin-layout__main-content min-w-0", t17, t18, t19, t20);
+		$[27] = t17;
+		$[28] = t18;
+		$[29] = t19;
+		$[30] = t20;
+		$[31] = t21;
+	} else t21 = $[31];
+	let t22;
+	if ($[32] !== children || $[33] !== t21) {
+		t22 = /* @__PURE__ */ jsx("main", {
+			id: "main-content",
+			className: "qa-admin-layout__main min-w-0 flex-1 overflow-y-auto",
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx("div", {
+				className: t21,
+				children
 			})
-		]
-	}) });
+		});
+		$[32] = children;
+		$[33] = t21;
+		$[34] = t22;
+	} else t22 = $[34];
+	let t23;
+	if ($[35] !== footer || $[36] !== shouldShowFooter) {
+		t23 = shouldShowFooter && footer && /* @__PURE__ */ jsx("footer", {
+			className: "qa-admin-layout__footer border-t",
+			children: footer
+		});
+		$[35] = footer;
+		$[36] = shouldShowFooter;
+		$[37] = t23;
+	} else t23 = $[37];
+	let t24;
+	if ($[38] !== t15 || $[39] !== t16 || $[40] !== t22 || $[41] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(SidebarInset, {
+			className: "qa-admin-layout__content flex h-svh flex-col",
+			children: [
+				t15,
+				t16,
+				t22,
+				t23
+			]
+		});
+		$[38] = t15;
+		$[39] = t16;
+		$[40] = t22;
+		$[41] = t23;
+		$[42] = t24;
+	} else t24 = $[42];
+	let t25;
+	if ($[43] !== t13 || $[44] !== t14 || $[45] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(SidebarProvider, {
+			defaultOpen: t13,
+			className: "qa-admin-layout__sidebar-wrapper border-border mx-auto h-svh max-w-[1920px] overflow-hidden border-x",
+			children: [t14, t24]
+		});
+		$[43] = t13;
+		$[44] = t14;
+		$[45] = t24;
+		$[46] = t25;
+	} else t25 = $[46];
+	let t26;
+	if ($[47] !== theme || $[48] !== toasterProps) {
+		t26 = /* @__PURE__ */ jsx(Toaster, {
+			theme,
+			...toasterProps
+		});
+		$[47] = theme;
+		$[48] = toasterProps;
+		$[49] = t26;
+	} else t26 = $[49];
+	let t27;
+	if ($[50] !== t10 || $[51] !== t12 || $[52] !== t25 || $[53] !== t26) {
+		t27 = /* @__PURE__ */ jsx(BreadcrumbProvider, { children: /* @__PURE__ */ jsxs("div", {
+			className: t10,
+			children: [
+				t11,
+				t12,
+				t25,
+				t26
+			]
+		}) });
+		$[50] = t10;
+		$[51] = t12;
+		$[52] = t25;
+		$[53] = t26;
+		$[54] = t27;
+	} else t27 = $[54];
+	return t27;
 }
 
 //#endregion
-export { AdminLayout };
-//# sourceMappingURL=admin-layout.mjs.map
+export { AdminLayout };

package/dist/client/views/layout/admin-router.d.mts

@@ -1,9 +1,7 @@
-import { ComponentRegistry } from "../../builder/types/field-types.mjs";
 import { PageDefinition } from "../../builder/page/page.mjs";
 import { DashboardConfig } from "../../builder/types/ui-config.mjs";
-import { DefaultViewsConfig } from "../../builder/types/views.mjs";
-import "../../builder/index.mjs";
-import * as React$1 from "react";
+import { ComponentRegistry } from "../../builder/types/field-types.mjs";
+import * as React from "react";
 
 //#region src/client/views/layout/admin-router.d.ts
 
@@ -53,32 +51,28 @@ interface AdminRouterProps {
   /**
    * Dashboard component (legacy - use dashboardConfig instead)
    */
-  DashboardComponent?: React$1.ComponentType;
+  DashboardComponent?: React.ComponentType;
   /**
    * Dashboard configuration (widgets, title, etc.)
    */
   dashboardConfig?: DashboardConfig;
-  /**
-   * Default views configuration
-   */
-  defaultViews?: DefaultViewsConfig;
   /**
    * Custom collection components (override default views)
    */
   collectionComponents?: Record<string, {
-    List?: React$1.ComponentType;
-    Form?: React$1.ComponentType;
+    List?: React.ComponentType;
+    Form?: React.ComponentType;
   }>;
   /**
    * Custom global components
    */
   globalComponents?: Record<string, {
-    Form?: React$1.ComponentType;
+    Form?: React.ComponentType;
   }>;
   /**
    * Render custom form fields for collection
    */
-  renderFormFields?: (collection: string) => React$1.ReactNode;
+  renderFormFields?: (collection: string) => React.ReactNode;
   /**
    * Component registry
    */
@@ -86,40 +80,14 @@ interface AdminRouterProps {
   /**
    * Not found component
    */
-  NotFoundComponent?: React$1.ComponentType;
+  NotFoundComponent?: React.ComponentType;
 }
-/**
- * AdminRouter Component
- *
- * Routes to the appropriate view based on URL segments.
- * Uses the view registry to resolve list/edit views dynamically.
- *
- * When used inside AdminProvider, collections/globals/pages are automatically
- * read from context if not provided as props.
- *
- * @example
- * ```tsx
- * // With AdminProvider (automatic)
- * <AdminProvider admin={admin} client={client}>
- *   <AdminRouter segments={segments} navigate={navigate} />
- * </AdminProvider>
- *
- * // Without AdminProvider (manual)
- * <AdminRouter
- *   segments={segments}
- *   navigate={navigate}
- *   collections={collections}
- *   globals={globals}
- * />
- * ```
- */
 /**
  * AdminRouter Component
  *
  * Routes to the appropriate view based on URL segments.
  * Uses Suspense internally - shows skeleton while config loads.
  */
-declare function AdminRouter(props: AdminRouterProps): React$1.ReactElement;
+declare function AdminRouter(props: AdminRouterProps): React.ReactElement;
 //#endregion
-export { AdminRouter, AdminRouterProps };
-//# sourceMappingURL=admin-router.d.mts.map
+export { AdminRouter, AdminRouterProps };