@questpie/admin 1.1.0 → 2.0.0

package/dist/client/views/globals/global-form-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-form-view.mjs","names":["configs: Record<string, any>","React"],"sources":["../../../../src/client/views/globals/global-form-view.tsx"],"sourcesContent":["/**\n * Global Form View - Default edit view component for globals\n *\n * Mirrors FormView for collections but adapted for singleton globals.\n * Renders global settings form with sections, tabs, sidebar, validation.\n */\n\nimport { Icon } from \"@iconify/react\";\nimport { QuestpieClientError } from \"questpie/client\";\nimport * as React from \"react\";\nimport { FormProvider, useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport type {\n\tComponentRegistry,\n\tFormViewConfig,\n} from \"../../builder/types/field-types\";\nimport type { GlobalBuilderState } from \"../../builder/types/global-types\";\nimport { LocaleSwitcher } from \"../../components/locale-switcher\";\nimport { Button } from \"../../components/ui/button\";\nimport { useGlobal, useGlobalUpdate } from \"../../hooks\";\nimport { useGlobalFields } from \"../../hooks/use-global-fields\";\nimport { useReactiveFields } from \"../../hooks/use-reactive-fields\";\nimport { useGlobalServerValidation } from \"../../hooks/use-server-validation\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { useSafeContentLocales, useScopedLocale } from \"../../runtime\";\nimport { AutoFormFields } from \"../collection/auto-form-fields\";\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/**\n * Extract reactive configs from global schema fields.\n * Used to determine which fields have server-side reactive behaviors.\n */\nfunction extractReactiveConfigs(schema: any): Record<string, any> {\n\tif (!schema?.fields) return {};\n\n\tconst configs: Record<string, any> = {};\n\n\tfor (const [fieldName, fieldDef] of Object.entries(schema.fields)) {\n\t\tif ((fieldDef as any).reactive) {\n\t\t\tconfigs[fieldName] = (fieldDef as any).reactive;\n\t\t}\n\t}\n\n\treturn configs;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Props for GlobalFormView component\n */\nexport interface GlobalFormViewProps {\n\t/**\n\t * Global name\n\t */\n\tglobal: string;\n\n\t/**\n\t * Global configuration from admin builder\n\t * Accepts GlobalBuilderState or any compatible config object\n\t */\n\tconfig?: Partial<GlobalBuilderState> | Record<string, any>;\n\n\t/**\n\t * View-specific configuration from registry/schema\n\t */\n\tviewConfig?: FormViewConfig;\n\n\t/**\n\t * Navigate function for routing\n\t */\n\tnavigate: (path: string) => void;\n\n\t/**\n\t * Base path for admin routes (e.g., \"/admin\")\n\t */\n\tbasePath?: string;\n\n\t/**\n\t * Component registry for custom field types\n\t */\n\tregistry?: ComponentRegistry;\n\n\t/**\n\t * All globals config (for potential cross-references)\n\t */\n\tallGlobalsConfig?: Record<\n\t\tstring,\n\t\tPartial<GlobalBuilderState> | Record<string, any>\n\t>;\n\n\t/**\n\t * Show metadata (updated dates)\n\t * @default true\n\t */\n\tshowMeta?: boolean;\n\n\t/**\n\t * Custom header actions (in addition to default Save button)\n\t */\n\theaderActions?: React.ReactNode;\n\n\t/**\n\t * Callback on successful save\n\t */\n\tonSuccess?: (data: any) => void;\n\n\t/**\n\t * Callback on error\n\t */\n\tonError?: (error: Error) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * GlobalFormView - Default form-based edit view for globals\n */\nexport default function GlobalFormView({\n\tglobal: globalName,\n\tconfig,\n\tviewConfig,\n\tregistry,\n\tshowMeta = true,\n\theaderActions,\n\tonSuccess,\n\tonError,\n}: GlobalFormViewProps) {\n\tconst { t } = useTranslation();\n\tconst resolveText = useResolveText();\n\n\tconst { data: globalData, isLoading: dataLoading } = useGlobal(globalName);\n\tconst { fields: schemaFields } = useGlobalFields(globalName);\n\n\tconst { locale: contentLocale, setLocale: setContentLocale } =\n\t\tuseScopedLocale();\n\tconst contentLocales = useSafeContentLocales();\n\tconst localeOptions = contentLocales?.locales ?? [];\n\n\tconst updateMutation = useGlobalUpdate(globalName, {\n\t\tonSuccess: (data) => {\n\t\t\ttoast.success(t(\"toast.saveSuccess\"));\n\t\t\tonSuccess?.(data);\n\t\t},\n\t\tonError: (error) => {\n\t\t\tonError?.(error);\n\t\t},\n\t});\n\n\t// Get validation resolver - uses server JSON Schema for validation\n\tconst { resolver } = useGlobalServerValidation(globalName);\n\n\tconst form = useForm({\n\t\tdefaultValues: (globalData ?? {}) as any,\n\t\tresolver,\n\t});\n\n\t// Reset form when data loads\n\tReact.useEffect(() => {\n\t\tif (globalData) {\n\t\t\tform.reset(globalData as any);\n\t\t}\n\t}, [form, globalData]);\n\n\t// Extract reactive configs from schema for server-side reactive handlers\n\tconst reactiveConfigs = React.useMemo(\n\t\t() => extractReactiveConfigs(schemaFields),\n\t\t[schemaFields],\n\t);\n\n\t// Use reactive fields hook for server-side compute/hidden/readOnly/disabled\n\tuseReactiveFields({\n\t\tcollection: globalName,\n\t\tmode: \"global\",\n\t\treactiveConfigs,\n\t\tenabled: !dataLoading && Object.keys(reactiveConfigs).length > 0,\n\t\tdebounce: 300,\n\t});\n\n\tconst resolvedConfig = React.useMemo(() => {\n\t\tif (!viewConfig) return config;\n\n\t\treturn {\n\t\t\t...(config ?? {}),\n\t\t\tform: viewConfig,\n\t\t};\n\t}, [config, viewConfig]);\n\n\tconst onSubmit = React.useCallback(\n\t\tasync (data: any) => {\n\t\t\ttry {\n\t\t\t\tconst result = await updateMutation.mutateAsync({\n\t\t\t\t\tdata,\n\t\t\t\t});\n\t\t\t\tif (result) {\n\t\t\t\t\tform.reset(result as any);\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\t// Handle field-level validation errors from the API\n\t\t\t\tif (\n\t\t\t\t\terror instanceof QuestpieClientError &&\n\t\t\t\t\terror.fieldErrors &&\n\t\t\t\t\terror.fieldErrors.length > 0\n\t\t\t\t) {\n\t\t\t\t\tfor (const fieldError of error.fieldErrors) {\n\t\t\t\t\t\tform.setError(fieldError.path as any, {\n\t\t\t\t\t\t\ttype: \"server\",\n\t\t\t\t\t\t\tmessage: fieldError.message,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\ttoast.error(t(\"toast.validationFailed\"), {\n\t\t\t\t\t\tdescription: t(\"toast.validationDescription\"),\n\t\t\t\t\t});\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Handle generic errors\n\t\t\t\tconst message =\n\t\t\t\t\terror instanceof Error ? error.message : t(\"error.unknown\");\n\t\t\t\ttoast.error(\n\t\t\t\t\tt(\"toast.settingsSaveFailed\") || \"Failed to save settings\",\n\t\t\t\t\t{\n\t\t\t\t\t\tdescription: message,\n\t\t\t\t\t},\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[updateMutation, form, t],\n\t);\n\n\t// Keyboard shortcut: Cmd+S to save\n\tReact.useEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tif ((e.metaKey || e.ctrlKey) && e.key === \"s\") {\n\t\t\t\te.preventDefault();\n\t\t\t\tform.handleSubmit(onSubmit)();\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => document.removeEventListener(\"keydown\", handleKeyDown);\n\t}, [form, onSubmit]);\n\n\tconst isSubmitting = updateMutation.isPending || form.formState.isSubmitting;\n\n\t// Format date helper\n\tconst formatDate = (date: string | Date) => {\n\t\treturn new Date(date).toLocaleDateString(undefined, {\n\t\t\tyear: \"numeric\",\n\t\t\tmonth: \"short\",\n\t\t\tday: \"numeric\",\n\t\t\thour: \"2-digit\",\n\t\t\tminute: \"2-digit\",\n\t\t});\n\t};\n\n\tif (dataLoading) {\n\t\treturn (\n\t\t\t<div className=\"flex h-64 items-center justify-center text-muted-foreground\">\n\t\t\t\t<Icon icon=\"ph:spinner-gap\" className=\"size-6 animate-spin\" />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst globalLabel = resolveText(\n\t\t(resolvedConfig as any)?.label ?? schemaFields?._globalLabel,\n\t\tglobalName,\n\t);\n\n\treturn (\n\t\t<FormProvider {...form}>\n\t\t\t<form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-4\">\n\t\t\t\t{/* Header - Title & Actions */}\n\t\t\t\t<div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n\t\t\t\t\t<div className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t<h1 className=\"text-2xl md:text-3xl font-extrabold tracking-tight\">\n\t\t\t\t\t\t\t\t{globalLabel}\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t{localeOptions.length > 0 && (\n\t\t\t\t\t\t\t\t<LocaleSwitcher\n\t\t\t\t\t\t\t\t\tlocales={localeOptions}\n\t\t\t\t\t\t\t\t\tvalue={contentLocale}\n\t\t\t\t\t\t\t\t\tonChange={setContentLocale}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{showMeta && globalData?.updatedAt && (\n\t\t\t\t\t\t\t<p className=\"mt-1 text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t{t(\"form.lastUpdated\")}: {formatDate(globalData.updatedAt)}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex items-center gap-2 shrink-0\">\n\t\t\t\t\t\t{headerActions}\n\t\t\t\t\t\t<Button type=\"submit\" disabled={isSubmitting} className=\"gap-2\">\n\t\t\t\t\t\t\t{isSubmitting ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:spinner-gap\" className=\"size-4 animate-spin\" />\n\t\t\t\t\t\t\t\t\t{t(\"common.loading\")}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:check\" width={16} height={16} />\n\t\t\t\t\t\t\t\t\t{t(\"common.save\")}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Main Content - Form Fields */}\n\t\t\t\t<AutoFormFields\n\t\t\t\t\tcollection={globalName}\n\t\t\t\t\tmode=\"global\"\n\t\t\t\t\tconfig={resolvedConfig}\n\t\t\t\t\tregistry={registry}\n\t\t\t\t/>\n\t\t\t</form>\n\t\t</FormProvider>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/views/index.d.mts

@@ -0,0 +1,28 @@
+import { AuthLayout, AuthLayoutProps } from "./auth/auth-layout.mjs";
+import { LoginForm, LoginFormProps, LoginFormValues } from "./auth/login-form.mjs";
+import { ForgotPasswordForm, ForgotPasswordFormProps, ForgotPasswordFormValues } from "./auth/forgot-password-form.mjs";
+import { ResetPasswordForm, ResetPasswordFormProps, ResetPasswordFormValues } from "./auth/reset-password-form.mjs";
+import { AcceptInviteForm, AcceptInviteFormProps, AcceptInviteFormValues } from "./auth/accept-invite-form.mjs";
+import { SetupForm, SetupFormProps, SetupFormValues } from "./auth/setup-form.mjs";
+import "./auth/index.mjs";
+import { ArrayCell, JsonCell, ObjectCell } from "./collection/cells/complex-cells.mjs";
+import { BooleanCell, DateCell, DateTimeCell, EmailCell, NumberCell, RichTextCell, SelectCell, TextCell, TimeCell } from "./collection/cells/primitive-cells.mjs";
+import { RelationCell } from "./collection/cells/relation-cells.mjs";
+import { UploadCell } from "./collection/cells/upload-cells.mjs";
+import { FormView, FormViewProps, FormViewRegistryConfig } from "./collection/form-view.mjs";
+import { TableView, TableViewConfig, TableViewProps } from "./collection/table-view.mjs";
+import "./collection/index.mjs";
+import "./common/index.mjs";
+import { AdminSidebarProps, LinkComponentProps } from "./layout/admin-sidebar.mjs";
+import { AdminLayout, AdminLayoutProps } from "./layout/admin-layout.mjs";
+import { AdminLayoutProvider, AdminLayoutProviderProps } from "./layout/admin-layout-provider.mjs";
+import { AdminRouter, AdminRouterProps } from "./layout/admin-router.mjs";
+import "./layout/index.mjs";
+import { DashboardPage, DashboardPageProps } from "./pages/dashboard-page.mjs";
+import { LoginPage, LoginPageProps } from "./pages/login-page.mjs";
+import { ForgotPasswordPage, ForgotPasswordPageProps } from "./pages/forgot-password-page.mjs";
+import { ResetPasswordPage, ResetPasswordPageProps } from "./pages/reset-password-page.mjs";
+import { InvitePage, InvitePageProps } from "./pages/invite-page.mjs";
+import { AcceptInvitePage, AcceptInvitePageProps } from "./pages/accept-invite-page.mjs";
+import { SetupPage, SetupPageProps } from "./pages/setup-page.mjs";
+import "./pages/index.mjs";

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

@@ -0,0 +1,140 @@
+import { AdminInput } from "../../builder/admin.mjs";
+import { AdminLayoutSharedProps } from "./admin-layout.mjs";
+import { QueryClient } from "@tanstack/react-query";
+import { QuestpieClient } from "questpie/client";
+import * as React$1 from "react";
+import { Questpie } from "questpie";
+
+//#region src/client/views/layout/admin-layout-provider.d.ts
+
+interface AdminLayoutProviderProps<TApp extends Questpie<any> = Questpie<any>> extends AdminLayoutSharedProps {
+  /**
+   * Admin configuration - pass your AdminBuilder directly.
+   * Can also accept an Admin instance for backward compatibility.
+   *
+   * @example
+   * ```tsx
+   * // Recommended: pass builder directly
+   * <AdminLayoutProvider admin={admin} ... />
+   *
+   * // Also works (backward compatible)
+   * <AdminLayoutProvider admin={Admin.from(admin)} ... />
+   * ```
+   */
+  admin: AdminInput<any>;
+  /**
+   * API client for data fetching
+   */
+  client: QuestpieClient<TApp>;
+  /**
+   * Auth client for authentication (created via createAdminAuthClient)
+   */
+  authClient?: any;
+  /**
+   * Optional QueryClient instance (will create one if not provided)
+   */
+  queryClient?: QueryClient;
+  /**
+   * Enable authentication guard for protected routes.
+   * When true, checks if user is authenticated before rendering content.
+   * @default true if authClient is provided
+   */
+  enableAuthGuard?: boolean;
+  /**
+   * Paths that don't require authentication.
+   * Use relative paths from basePath (e.g., "/login" for "/admin/login").
+   * @default ["/login", "/forgot-password", "/reset-password", "/accept-invite"]
+   */
+  publicPaths?: string[];
+  /**
+   * Required role for accessing protected routes.
+   * @default "admin"
+   */
+  requiredRole?: string;
+  /**
+   * Custom loading component while checking authentication.
+   */
+  authLoadingFallback?: React$1.ReactNode;
+  /**
+   * Custom unauthorized component (instead of redirecting to login).
+   */
+  authUnauthorizedFallback?: React$1.ReactNode;
+  /**
+   * Use server-side translations (fetched via getAdminTranslations RPC).
+   * When true, translations are fetched from the server configured via
+   * .adminLocale() and .messages() on QuestpieBuilder.
+   *
+   * @default false (for backwards compatibility)
+   *
+   * @example
+   * ```tsx
+   * // Server configures locales and messages
+   * const cms = q()
+   *   .use(adminModule)
+   *   .adminLocale({ locales: ["en", "sk"], defaultLocale: "en" })
+   *   .messages({ sk: { "common.save": "Ulozit" } })
+   *   .build();
+   *
+   * // Client fetches from server
+   * <AdminLayoutProvider
+   *   admin={admin}
+   *   client={client}
+   *   useServerTranslations
+   * >
+   *   {children}
+   * </AdminLayoutProvider>
+   * ```
+   */
+  useServerTranslations?: boolean;
+  /**
+   * Fallback element to show while loading server translations.
+   * Only used when useServerTranslations is true.
+   */
+  translationsFallback?: React$1.ReactNode;
+  /**
+   * Initial UI locale (admin interface language)
+   * If not provided, reads from cookie or uses default from admin config
+   */
+  initialUiLocale?: string;
+  /**
+   * Children to render inside the layout
+   * - Next.js: {children} from layout props
+   * - TanStack Router: <Outlet />
+   */
+  children: React$1.ReactNode;
+}
+/**
+ * AdminLayoutProvider Component
+ *
+ * Universal wrapper for admin layout that works with any router.
+ * Handles all the provider setup and renders children inside the layout.
+ */
+declare function AdminLayoutProvider<TApp extends Questpie<any>>({
+  admin: adminInput,
+  client,
+  authClient,
+  queryClient,
+  LinkComponent,
+  activeRoute,
+  basePath,
+  header,
+  footer,
+  sidebarProps,
+  theme,
+  setTheme,
+  showThemeToggle,
+  toasterProps,
+  className,
+  enableAuthGuard,
+  publicPaths,
+  requiredRole,
+  authLoadingFallback,
+  authUnauthorizedFallback,
+  useServerTranslations,
+  translationsFallback,
+  initialUiLocale,
+  children
+}: AdminLayoutProviderProps<TApp>): React$1.ReactElement;
+//#endregion
+export { AdminLayoutProvider, AdminLayoutProviderProps };
+//# sourceMappingURL=admin-layout-provider.d.mts.map

package/dist/client/views/layout/admin-layout-provider.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin-layout-provider.d.mts","names":[],"sources":["../../../../src/client/views/layout/admin-layout-provider.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAsEiB,sCACF,gBAAgB,uBACrB;;;;;;;;;;;;;;SAcD;;;;UAKC,eAAe;;;;;;;;gBAUT;;;;;;;;;;;;;;;;;;;;;wBA6BQ,OAAA,CAAM;;;;6BAKD,OAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsCV,OAAA,CAAM;;;;;;;;;;;YAanB,OAAA,CAAM;;;;;;;;iBAwEF,iCAAiC;SACxC;;;;;;;;;;;;;;;;;;;;;;;;GA4BN,yBAAyB,QAAQ,OAAA,CAAM"}

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

@@ -0,0 +1,90 @@
+import { Admin } from "../../builder/admin.mjs";
+import { AdminProvider } from "../../runtime/provider.mjs";
+import { AdminLayout } from "./admin-layout.mjs";
+import { AuthGuard } from "../../components/auth/auth-guard.mjs";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/views/layout/admin-layout-provider.tsx
+let cachedQueryClient;
+function getDefaultQueryClient() {
+	if (!cachedQueryClient) cachedQueryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 60 * 1e3 } } });
+	return cachedQueryClient;
+}
+/**
+* Default public paths that don't require authentication
+* These paths also render WITHOUT the admin layout (no sidebar/header)
+*/
+const DEFAULT_PUBLIC_PATHS = [
+	"/login",
+	"/forgot-password",
+	"/reset-password",
+	"/accept-invite",
+	"/setup"
+];
+/**
+* Check if current path matches any public path
+*/
+function isPublicPath(currentPath, basePath, publicPaths) {
+	if (!currentPath) return false;
+	const normalizedCurrent = currentPath.replace(/\/+$/, "");
+	const normalizedBase = basePath.replace(/\/+$/, "");
+	for (const publicPath of publicPaths) {
+		const fullPublicPath = `${normalizedBase}${publicPath}`.replace(/\/+$/, "");
+		if (normalizedCurrent === fullPublicPath || normalizedCurrent.startsWith(`${fullPublicPath}/`)) return true;
+	}
+	return false;
+}
+/**
+* AdminLayoutProvider Component
+*
+* Universal wrapper for admin layout that works with any router.
+* Handles all the provider setup and renders children inside the layout.
+*/
+function AdminLayoutProvider({ admin: adminInput, client, authClient, queryClient, LinkComponent, activeRoute, basePath = "/admin", header, footer, sidebarProps, theme, setTheme, showThemeToggle, toasterProps, className, enableAuthGuard, publicPaths = DEFAULT_PUBLIC_PATHS, requiredRole = "admin", authLoadingFallback, authUnauthorizedFallback, useServerTranslations, translationsFallback, initialUiLocale, children }) {
+	const qc = queryClient ?? getDefaultQueryClient();
+	const admin = Admin.normalize(adminInput);
+	const shouldUseAuthGuard = enableAuthGuard ?? authClient != null;
+	const isCurrentPathPublic = isPublicPath(activeRoute ?? (typeof window !== "undefined" ? window.location.pathname : void 0), basePath, publicPaths);
+	let innerContent;
+	if (isCurrentPathPublic) innerContent = children;
+	else {
+		const layoutContent = /* @__PURE__ */ jsx(AdminLayout, {
+			LinkComponent,
+			activeRoute,
+			basePath,
+			header,
+			footer,
+			sidebarProps,
+			theme,
+			setTheme,
+			showThemeToggle,
+			toasterProps,
+			className,
+			children
+		});
+		innerContent = shouldUseAuthGuard ? /* @__PURE__ */ jsx(AuthGuard, {
+			loginPath: `${basePath}/login`,
+			requiredRole,
+			loadingFallback: authLoadingFallback,
+			unauthorizedFallback: authUnauthorizedFallback,
+			children: layoutContent
+		}) : layoutContent;
+	}
+	return /* @__PURE__ */ jsx(QueryClientProvider, {
+		client: qc,
+		children: /* @__PURE__ */ jsx(AdminProvider, {
+			admin,
+			client,
+			authClient,
+			useServerTranslations,
+			translationsFallback,
+			initialUiLocale,
+			children: innerContent
+		})
+	});
+}
+
+//#endregion
+export { AdminLayoutProvider };
+//# sourceMappingURL=admin-layout-provider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin-layout-provider.mjs","names":["cachedQueryClient: QueryClient | undefined","QueryClientClass","innerContent: React.ReactNode"],"sources":["../../../../src/client/views/layout/admin-layout-provider.tsx"],"sourcesContent":["/**\n * AdminLayoutProvider Component\n *\n * Universal layout wrapper that works with any router.\n * Provides AdminProvider + AdminLayout and renders children.\n *\n * @example Next.js (App Router)\n * ```tsx\n * // app/admin/layout.tsx\n * export default function AdminLayout({ children }) {\n *   return (\n *     <AdminLayoutProvider\n *       admin={myAdmin}\n *       client={cmsClient}\n *       authClient={authClient}\n *       LinkComponent={Link}\n *     >\n *       {children}\n *     </AdminLayoutProvider>\n *   );\n * }\n * ```\n *\n * @example TanStack Router\n * ```tsx\n * // routes/admin.tsx\n * function AdminLayout() {\n *   return (\n *     <AdminLayoutProvider\n *       admin={myAdmin}\n *       client={cmsClient}\n *       authClient={authClient}\n *       LinkComponent={Link}\n *     >\n *       <Outlet />\n *     </AdminLayoutProvider>\n *   );\n * }\n * ```\n *\n * @example With Auth Protection\n * ```tsx\n * <AdminLayoutProvider\n *   admin={myAdmin}\n *   client={cmsClient}\n *   authClient={authClient}\n *   enableAuthGuard={true}\n *   publicPaths={[\"/admin/login\", \"/admin/forgot-password\"]}\n *   requiredRole=\"admin\"\n * >\n *   {children}\n * </AdminLayoutProvider>\n * ```\n */\n\nimport type { QueryClient } from \"@tanstack/react-query\";\nimport { QueryClientProvider } from \"@tanstack/react-query\";\nimport type { Questpie } from \"questpie\";\nimport type { QuestpieClient } from \"questpie/client\";\nimport type * as React from \"react\";\nimport { Admin, type AdminInput } from \"../../builder/admin\";\nimport type { AdminBuilder } from \"../../builder/admin-builder\";\nimport { AuthGuard } from \"../../components/auth\";\nimport { AdminProvider } from \"../../runtime/provider\";\nimport { AdminLayout, type AdminLayoutSharedProps } from \"./admin-layout\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface AdminLayoutProviderProps<\n  TApp extends Questpie<any> = Questpie<any>,\n> extends AdminLayoutSharedProps {\n  /**\n   * Admin configuration - pass your AdminBuilder directly.\n   * Can also accept an Admin instance for backward compatibility.\n   *\n   * @example\n   * ```tsx\n   * // Recommended: pass builder directly\n   * <AdminLayoutProvider admin={admin} ... />\n   *\n   * // Also works (backward compatible)\n   * <AdminLayoutProvider admin={Admin.from(admin)} ... />\n   * ```\n   */\n  admin: AdminInput<any>;\n\n  /**\n   * API client for data fetching\n   */\n  client: QuestpieClient<TApp>;\n\n  /**\n   * Auth client for authentication (created via createAdminAuthClient)\n   */\n  authClient?: any;\n\n  /**\n   * Optional QueryClient instance (will create one if not provided)\n   */\n  queryClient?: QueryClient;\n\n  // =========================================================================\n  // Auth Guard Options\n  // =========================================================================\n\n  /**\n   * Enable authentication guard for protected routes.\n   * When true, checks if user is authenticated before rendering content.\n   * @default true if authClient is provided\n   */\n  enableAuthGuard?: boolean;\n\n  /**\n   * Paths that don't require authentication.\n   * Use relative paths from basePath (e.g., \"/login\" for \"/admin/login\").\n   * @default [\"/login\", \"/forgot-password\", \"/reset-password\", \"/accept-invite\"]\n   */\n  publicPaths?: string[];\n\n  /**\n   * Required role for accessing protected routes.\n   * @default \"admin\"\n   */\n  requiredRole?: string;\n\n  /**\n   * Custom loading component while checking authentication.\n   */\n  authLoadingFallback?: React.ReactNode;\n\n  /**\n   * Custom unauthorized component (instead of redirecting to login).\n   */\n  authUnauthorizedFallback?: React.ReactNode;\n\n  // =========================================================================\n  // i18n Options\n  // =========================================================================\n\n  /**\n   * Use server-side translations (fetched via getAdminTranslations RPC).\n   * When true, translations are fetched from the server configured via\n   * .adminLocale() and .messages() on QuestpieBuilder.\n   *\n   * @default false (for backwards compatibility)\n   *\n   * @example\n   * ```tsx\n   * // Server configures locales and messages\n   * const cms = q()\n   *   .use(adminModule)\n   *   .adminLocale({ locales: [\"en\", \"sk\"], defaultLocale: \"en\" })\n   *   .messages({ sk: { \"common.save\": \"Ulozit\" } })\n   *   .build();\n   *\n   * // Client fetches from server\n   * <AdminLayoutProvider\n   *   admin={admin}\n   *   client={client}\n   *   useServerTranslations\n   * >\n   *   {children}\n   * </AdminLayoutProvider>\n   * ```\n   */\n  useServerTranslations?: boolean;\n\n  /**\n   * Fallback element to show while loading server translations.\n   * Only used when useServerTranslations is true.\n   */\n  translationsFallback?: React.ReactNode;\n\n  /**\n   * Initial UI locale (admin interface language)\n   * If not provided, reads from cookie or uses default from admin config\n   */\n  initialUiLocale?: string;\n\n  /**\n   * Children to render inside the layout\n   * - Next.js: {children} from layout props\n   * - TanStack Router: <Outlet />\n   */\n  children: React.ReactNode;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nimport { QueryClient as QueryClientClass } from \"@tanstack/react-query\";\n\nlet cachedQueryClient: QueryClient | undefined;\n\nfunction getDefaultQueryClient(): QueryClient {\n  if (!cachedQueryClient) {\n    cachedQueryClient = new QueryClientClass({\n      defaultOptions: {\n        queries: {\n          staleTime: 60 * 1000, // 1 minute\n        },\n      },\n    });\n  }\n  return cachedQueryClient;\n}\n\n/**\n * Default public paths that don't require authentication\n * These paths also render WITHOUT the admin layout (no sidebar/header)\n */\nconst DEFAULT_PUBLIC_PATHS = [\n  \"/login\",\n  \"/forgot-password\",\n  \"/reset-password\",\n  \"/accept-invite\",\n  \"/setup\",\n];\n\n/**\n * Check if current path matches any public path\n */\nfunction isPublicPath(\n  currentPath: string | undefined,\n  basePath: string,\n  publicPaths: string[],\n): boolean {\n  if (!currentPath) return false;\n\n  // Normalize paths\n  const normalizedCurrent = currentPath.replace(/\\/+$/, \"\");\n  const normalizedBase = basePath.replace(/\\/+$/, \"\");\n\n  for (const publicPath of publicPaths) {\n    // Build full public path\n    const fullPublicPath = `${normalizedBase}${publicPath}`.replace(/\\/+$/, \"\");\n\n    // Check exact match or starts with (for nested routes)\n    if (\n      normalizedCurrent === fullPublicPath ||\n      normalizedCurrent.startsWith(`${fullPublicPath}/`)\n    ) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/**\n * AdminLayoutProvider Component\n *\n * Universal wrapper for admin layout that works with any router.\n * Handles all the provider setup and renders children inside the layout.\n */\nexport function AdminLayoutProvider<TApp extends Questpie<any>>({\n  admin: adminInput,\n  client,\n  authClient,\n  queryClient,\n  // Shared layout props\n  LinkComponent,\n  activeRoute,\n  basePath = \"/admin\",\n  header,\n  footer,\n  sidebarProps,\n  theme,\n  setTheme,\n  showThemeToggle,\n  toasterProps,\n  className,\n  // Auth guard props\n  enableAuthGuard,\n  publicPaths = DEFAULT_PUBLIC_PATHS,\n  requiredRole = \"admin\",\n  authLoadingFallback,\n  authUnauthorizedFallback,\n  // i18n props\n  useServerTranslations,\n  translationsFallback,\n  initialUiLocale,\n  // Children\n  children,\n}: AdminLayoutProviderProps<TApp>): React.ReactElement {\n  const qc = queryClient ?? getDefaultQueryClient();\n\n  // Normalize admin input - accepts both AdminBuilder and Admin instance\n  const admin = Admin.normalize(adminInput);\n\n  // Determine if auth guard should be enabled\n  // Default: enabled if authClient is provided\n  const shouldUseAuthGuard = enableAuthGuard ?? authClient != null;\n\n  // Check if current route is public\n  const currentPath =\n    activeRoute ??\n    (typeof window !== \"undefined\" ? window.location.pathname : undefined);\n  const isCurrentPathPublic = isPublicPath(currentPath, basePath, publicPaths);\n\n  // Determine content based on path type:\n  // - Public paths (login, setup, etc.): render children directly (no AdminLayout)\n  // - Protected paths: render with AdminLayout + optional AuthGuard\n  let innerContent: React.ReactNode;\n\n  if (isCurrentPathPublic) {\n    // Public paths render children directly without admin layout (sidebar/header)\n    // Auth pages (login, setup) use their own AuthLayout component\n    innerContent = children;\n  } else {\n    // Protected paths get the full admin layout\n    const layoutContent = (\n      <AdminLayout\n        LinkComponent={LinkComponent}\n        activeRoute={activeRoute}\n        basePath={basePath}\n        header={header}\n        footer={footer}\n        sidebarProps={sidebarProps}\n        theme={theme}\n        setTheme={setTheme}\n        showThemeToggle={showThemeToggle}\n        toasterProps={toasterProps}\n        className={className}\n      >\n        {children}\n      </AdminLayout>\n    );\n\n    // Optionally wrap with auth guard\n    innerContent = shouldUseAuthGuard ? (\n      <AuthGuard\n        loginPath={`${basePath}/login`}\n        requiredRole={requiredRole}\n        loadingFallback={authLoadingFallback}\n        unauthorizedFallback={authUnauthorizedFallback}\n      >\n        {layoutContent}\n      </AuthGuard>\n    ) : (\n      layoutContent\n    );\n  }\n\n  const content = (\n    <AdminProvider\n      admin={admin}\n      client={client}\n      authClient={authClient}\n      useServerTranslations={useServerTranslations}\n      translationsFallback={translationsFallback}\n      initialUiLocale={initialUiLocale}\n    >\n      {innerContent}\n    </AdminProvider>\n  );\n\n  // Always wrap with QueryClientProvider\n  return <QueryClientProvider client={qc}>{content}</QueryClientProvider>;\n}\n\nexport default AdminLayoutProvider;\n"],"mappings":";;;;;;;;AAmMA,IAAIA;AAEJ,SAAS,wBAAqC;AAC5C,KAAI,CAAC,kBACH,qBAAoB,IAAIC,YAAiB,EACvC,gBAAgB,EACd,SAAS,EACP,WAAW,KAAK,KACjB,EACF,EACF,CAAC;AAEJ,QAAO;;;;;;AAOT,MAAM,uBAAuB;CAC3B;CACA;CACA;CACA;CACA;CACD;;;;AAKD,SAAS,aACP,aACA,UACA,aACS;AACT,KAAI,CAAC,YAAa,QAAO;CAGzB,MAAM,oBAAoB,YAAY,QAAQ,QAAQ,GAAG;CACzD,MAAM,iBAAiB,SAAS,QAAQ,QAAQ,GAAG;AAEnD,MAAK,MAAM,cAAc,aAAa;EAEpC,MAAM,iBAAiB,GAAG,iBAAiB,aAAa,QAAQ,QAAQ,GAAG;AAG3E,MACE,sBAAsB,kBACtB,kBAAkB,WAAW,GAAG,eAAe,GAAG,CAElD,QAAO;;AAIX,QAAO;;;;;;;;AAST,SAAgB,oBAAgD,EAC9D,OAAO,YACP,QACA,YACA,aAEA,eACA,aACA,WAAW,UACX,QACA,QACA,cACA,OACA,UACA,iBACA,cACA,WAEA,iBACA,cAAc,sBACd,eAAe,SACf,qBACA,0BAEA,uBACA,sBACA,iBAEA,YACqD;CACrD,MAAM,KAAK,eAAe,uBAAuB;CAGjD,MAAM,QAAQ,MAAM,UAAU,WAAW;CAIzC,MAAM,qBAAqB,mBAAmB,cAAc;CAM5D,MAAM,sBAAsB,aAF1B,gBACC,OAAO,WAAW,cAAc,OAAO,SAAS,WAAW,SACR,UAAU,YAAY;CAK5E,IAAIC;AAEJ,KAAI,oBAGF,gBAAe;MACV;EAEL,MAAM,gBACJ,oBAAC;GACgB;GACF;GACH;GACF;GACA;GACM;GACP;GACG;GACO;GACH;GACH;GAEV;IACW;AAIhB,iBAAe,qBACb,oBAAC;GACC,WAAW,GAAG,SAAS;GACT;GACd,iBAAiB;GACjB,sBAAsB;aAErB;IACS,GAEZ;;AAkBJ,QAAO,oBAAC;EAAoB,QAAQ;YAblC,oBAAC;GACQ;GACC;GACI;GACW;GACD;GACL;aAEhB;IACa;GAIqD"}

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

@@ -0,0 +1,151 @@
+import { AdminToasterProps } from "../../components/ui/sonner.mjs";
+import { NavigationGroup } from "../../runtime/routes.mjs";
+import { AdminSidebarProps } from "./admin-sidebar.mjs";
+import * as React$1 from "react";
+
+//#region src/client/views/layout/admin-layout.d.ts
+
+/**
+ * Theme mode for the admin interface
+ */
+type AdminTheme = "light" | "dark" | "system";
+/**
+ * Layout mode for content area width
+ * - default: max-w-6xl (forms, settings)
+ * - wide: max-w-7xl (tables, cards)
+ * - full: 100% with padding (kanban, calendar)
+ * - immersive: 100% no padding (puck editor)
+ */
+type LayoutMode = "default" | "wide" | "full" | "immersive";
+/**
+ * Shared layout props that can be passed through AdminLayoutProvider
+ * or directly to AdminLayout.
+ */
+interface AdminLayoutSharedProps {
+  /**
+   * Link component (router-specific)
+   */
+  LinkComponent: AdminSidebarProps["LinkComponent"];
+  /**
+   * Current active route
+   */
+  activeRoute?: string;
+  /**
+   * Base path for admin routes
+   * @default "/admin"
+   */
+  basePath?: string;
+  /**
+   * Header content
+   */
+  header?: React$1.ReactNode;
+  /**
+   * Footer content
+   */
+  footer?: React$1.ReactNode;
+  /**
+   * Additional sidebar props
+   */
+  sidebarProps?: Partial<Omit<AdminSidebarProps, "navigation" | "LinkComponent">>;
+  /**
+   * Current theme.
+   * Pass from your app's theme context.
+   * @default "system"
+   */
+  theme?: AdminTheme;
+  /**
+   * Callback to change theme.
+   * Connect to your app's theme context setTheme function.
+   */
+  setTheme?: (theme: AdminTheme) => void;
+  /**
+   * Show theme toggle button in the topbar
+   * @default true (when setTheme is provided)
+   */
+  showThemeToggle?: boolean;
+  /**
+   * Additional toaster props
+   */
+  toasterProps?: Omit<AdminToasterProps, "theme">;
+  /**
+   * Custom layout className
+   */
+  className?: string;
+  /**
+   * Layout mode for content area width
+   * @default "default"
+   */
+  layoutMode?: LayoutMode;
+}
+interface AdminLayoutProps extends AdminLayoutSharedProps {
+  /**
+   * Navigation groups for sidebar.
+   * If not provided, reads from AdminProvider context.
+   */
+  navigation?: NavigationGroup[];
+  /**
+   * Brand name for sidebar.
+   * If not provided, reads from AdminProvider context.
+   */
+  brandName?: string;
+  /**
+   * Whether sidebar is collapsed
+   */
+  sidebarCollapsed?: boolean;
+  /**
+   * Main content to render
+   */
+  children: React$1.ReactNode;
+  /**
+   * Navigation function (for search/quick actions)
+   */
+  navigate?: (path: string) => void;
+}
+/**
+ * AdminLayout Component
+ *
+ * When used inside AdminProvider, navigation and brandName are automatically
+ * read from context if not provided as props.
+ *
+ * @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>
+ * ```
+ */
+declare function AdminLayout({
+  navigation: navigationProp,
+  LinkComponent,
+  activeRoute,
+  basePath,
+  brandName: brandNameProp,
+  sidebarCollapsed: sidebarCollapsedProp,
+  children,
+  className,
+  sidebarProps,
+  header,
+  footer,
+  navigate: navigateProp,
+  theme,
+  setTheme,
+  showThemeToggle,
+  toasterProps,
+  layoutMode
+}: AdminLayoutProps): React$1.ReactElement;
+//#endregion
+export { AdminLayout, AdminLayoutProps, AdminLayoutSharedProps };
+//# sourceMappingURL=admin-layout.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin-layout.d.mts","names":[],"sources":["../../../../src/client/views/layout/admin-layout.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAuGsB,KAvEV,UAAA,GAuEU,OAAA,GAAA,MAAA,GAAA,QAAA;;;;AActB;;;;AAAgE,KA5EpD,UAAA,GA4EoD,SAAA,GAAA,MAAA,GAAA,MAAA,GAAA,WAAA;AAkGhE;;;;AAIE,UA5Ke,sBAAA,CA4Kf;EACW;;;EAGX,aAAA,EA5Ke,iBA4Kf,CAAA,eAAA,CAAA;EACA;;;EAGU,WAAA,CAAA,EAAA,MAAA;EACV;;;;EAIA,QAAA,CAAA,EAAA,MAAA;EACC;;;WAtKQ,OAAA,CAAM;;;;WAKN,OAAA,CAAM;;;;iBAKA,QACb,KAAK;;;;;;UAQC;;;;;qBAMW;;;;;;;;;iBAWJ,KAAK;;;;;;;;;eAWP;;UAGE,gBAAA,SAAyB;;;;;eAK3B;;;;;;;;;;;;;YAgBH,OAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6EF,WAAA;cACF;;;;aAID;oBACO;;;;;;YAMR;;;;;;GAMT,mBAAmB,OAAA,CAAM"}

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

@@ -0,0 +1,144 @@
+import { cn } from "../../lib/utils.mjs";
+import { useAdminStore } from "../../runtime/provider.mjs";
+import { SidebarInset, SidebarProvider } from "../../components/ui/sidebar.mjs";
+import { Toaster } from "../../components/ui/sonner.mjs";
+import { BreadcrumbProvider, useCurrentBreadcrumbs } from "../../contexts/breadcrumb-context.mjs";
+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 { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/layout/admin-layout.tsx
+/**
+* AdminLayout Component
+*
+* Complete admin layout with:
+* - Sidebar navigation (using shadcn sidebar primitives)
+* - Main content area
+* - Optional header/footer
+*
+* 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
+	};
+}
+/**
+* Topbar wrapper that reads breadcrumbs from context
+*/
+function AdminTopbarWithBreadcrumbs(props) {
+	const breadcrumbs = useCurrentBreadcrumbs();
+	return /* @__PURE__ */ jsx(AdminTopbar, {
+		...props,
+		breadcrumbs
+	});
+}
+/**
+* AdminLayout Component
+*
+* When used inside AdminProvider, navigation and brandName are automatically
+* read from context if not provided as props.
+*
+* @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" }) {
+	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);
+			}
+		};
+		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
+			})
+		]
+	}) });
+}
+
+//#endregion
+export { AdminLayout };
+//# sourceMappingURL=admin-layout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin-layout.mjs","names":["React"],"sources":["../../../../src/client/views/layout/admin-layout.tsx"],"sourcesContent":["/**\n * AdminLayout Component\n *\n * Complete admin layout with:\n * - Sidebar navigation (using shadcn sidebar primitives)\n * - Main content area\n * - Optional header/footer\n *\n * Automatically reads from AdminProvider context when props are not provided.\n */\n\nimport * as React from \"react\";\nimport { SidebarInset, SidebarProvider } from \"../../components/ui/sidebar\";\nimport { type AdminToasterProps, Toaster } from \"../../components/ui/sonner\";\nimport {\n  BreadcrumbProvider,\n  useCurrentBreadcrumbs,\n} from \"../../contexts/breadcrumb-context\";\nimport { cn } from \"../../lib/utils\";\nimport { useAdminStore } from \"../../runtime/provider\";\nimport type { NavigationGroup } from \"../../runtime/routes\";\nimport { GlobalSearch } from \"../common\";\nimport { AdminSidebar, type AdminSidebarProps } from \"./admin-sidebar\";\nimport { AdminTopbar } from \"./admin-topbar\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Theme mode for the admin interface\n */\nexport type AdminTheme = \"light\" | \"dark\" | \"system\";\n\n/**\n * Layout mode for content area width\n * - default: max-w-6xl (forms, settings)\n * - wide: max-w-7xl (tables, cards)\n * - full: 100% with padding (kanban, calendar)\n * - immersive: 100% no padding (puck editor)\n */\nexport type LayoutMode = \"default\" | \"wide\" | \"full\" | \"immersive\";\n\n/**\n * Shared layout props that can be passed through AdminLayoutProvider\n * or directly to AdminLayout.\n */\nexport interface AdminLayoutSharedProps {\n  /**\n   * Link component (router-specific)\n   */\n  LinkComponent: AdminSidebarProps[\"LinkComponent\"];\n\n  /**\n   * Current active route\n   */\n  activeRoute?: string;\n\n  /**\n   * Base path for admin routes\n   * @default \"/admin\"\n   */\n  basePath?: string;\n\n  /**\n   * Header content\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Footer content\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Additional sidebar props\n   */\n  sidebarProps?: Partial<\n    Omit<AdminSidebarProps, \"navigation\" | \"LinkComponent\">\n  >;\n\n  /**\n   * Current theme.\n   * Pass from your app's theme context.\n   * @default \"system\"\n   */\n  theme?: AdminTheme;\n\n  /**\n   * Callback to change theme.\n   * Connect to your app's theme context setTheme function.\n   */\n  setTheme?: (theme: AdminTheme) => void;\n\n  /**\n   * Show theme toggle button in the topbar\n   * @default true (when setTheme is provided)\n   */\n  showThemeToggle?: boolean;\n\n  /**\n   * Additional toaster props\n   */\n  toasterProps?: Omit<AdminToasterProps, \"theme\">;\n\n  /**\n   * Custom layout className\n   */\n  className?: string;\n\n  /**\n   * Layout mode for content area width\n   * @default \"default\"\n   */\n  layoutMode?: LayoutMode;\n}\n\nexport interface AdminLayoutProps extends AdminLayoutSharedProps {\n  /**\n   * Navigation groups for sidebar.\n   * If not provided, reads from AdminProvider context.\n   */\n  navigation?: NavigationGroup[];\n\n  /**\n   * Brand name for sidebar.\n   * If not provided, reads from AdminProvider context.\n   */\n  brandName?: string;\n\n  /**\n   * Whether sidebar is collapsed\n   */\n  sidebarCollapsed?: boolean;\n\n  /**\n   * Main content to render\n   */\n  children: React.ReactNode;\n\n  /**\n   * Navigation function (for search/quick actions)\n   */\n  navigate?: (path: string) => void;\n}\n\n// ============================================================================\n// Internal Hook - Resolve props from store\n// ============================================================================\n\nfunction useLayoutProps(props: {\n  navigation?: NavigationGroup[];\n  brandName?: string;\n  navigate?: (path: string) => void;\n}): {\n  navigation: NavigationGroup[];\n  brandName: string;\n  navigate: (path: string) => void;\n} {\n  // Subscribe to store values reactively (for HMR support)\n  const storeNavigation = useAdminStore((s) => s.navigation);\n  const storeBrandName = useAdminStore((s) => s.brandName);\n  const storeNavigate = useAdminStore((s) => s.navigate);\n\n  return {\n    navigation: props.navigation ?? storeNavigation,\n    brandName: props.brandName ?? storeBrandName,\n    navigate: props.navigate ?? storeNavigate,\n  };\n}\n\n// ============================================================================\n// Internal Components\n// ============================================================================\n\n/**\n * Topbar wrapper that reads breadcrumbs from context\n */\nfunction AdminTopbarWithBreadcrumbs(\n  props: Omit<React.ComponentProps<typeof AdminTopbar>, \"breadcrumbs\">,\n) {\n  const breadcrumbs = useCurrentBreadcrumbs();\n  return <AdminTopbar {...props} breadcrumbs={breadcrumbs} />;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * AdminLayout Component\n *\n * When used inside AdminProvider, navigation and brandName are automatically\n * read from context if not provided as props.\n *\n * @example\n * ```tsx\n * // With AdminProvider (automatic)\n * <AdminProvider admin={admin} client={client}>\n *   <AdminLayout LinkComponent={Link} activeRoute=\"/admin/posts\">\n *     <Outlet />\n *   </AdminLayout>\n * </AdminProvider>\n *\n * // Without AdminProvider (manual)\n * <AdminLayout\n *   navigation={buildNavigation(admin)}\n *   LinkComponent={Link}\n *   activeRoute=\"/admin/posts\"\n *   brandName=\"My CMS\"\n * >\n *   <Outlet />\n * </AdminLayout>\n * ```\n */\nexport function AdminLayout({\n  navigation: navigationProp,\n  LinkComponent,\n  activeRoute,\n  basePath = \"/admin\",\n  brandName: brandNameProp,\n  sidebarCollapsed: sidebarCollapsedProp = false,\n  children,\n  className,\n  sidebarProps,\n  header,\n  footer,\n  navigate: navigateProp,\n  theme = \"system\",\n  setTheme,\n  showThemeToggle,\n  toasterProps,\n  layoutMode = \"default\",\n}: AdminLayoutProps): React.ReactElement {\n  // Infer show flags from content\n  const shouldShowHeader = !!header;\n  const shouldShowFooter = !!footer;\n  // Resolve navigation and brandName from props or store\n  const { navigation, brandName, navigate } = useLayoutProps({\n    navigation: navigationProp,\n    brandName: brandNameProp,\n    navigate: navigateProp,\n  });\n\n  const [isSearchOpen, setIsSearchOpen] = React.useState(false);\n\n  // Keyboard shortcuts for search\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setIsSearchOpen(true);\n      }\n    };\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  return (\n    <BreadcrumbProvider>\n      <div\n        className={cn(\"min-h-screen bg-background bg-grid-quest\", className)}\n      >\n        {/* <div className=\"fixed inset-0 bg-grid-quest  pointer-events-none z-10\" /> */}\n        <GlobalSearch\n          isOpen={isSearchOpen}\n          onClose={() => setIsSearchOpen(false)}\n          navigate={navigate}\n          basePath={basePath}\n        />\n\n        {/* Max-width container for ultrawide monitors - centered with subtle side borders */}\n        <SidebarProvider\n          defaultOpen={!sidebarCollapsedProp}\n          className=\"mx-auto max-w-[1920px] border-x border-border/40 h-svh overflow-hidden\"\n        >\n          {/* Sidebar */}\n          <AdminSidebar\n            navigation={navigationProp}\n            LinkComponent={LinkComponent}\n            activeRoute={activeRoute}\n            basePath={basePath}\n            brandName={brandNameProp}\n            {...sidebarProps}\n          />\n\n          {/* Content Area */}\n          <SidebarInset className=\"flex h-svh flex-col\">\n            <AdminTopbarWithBreadcrumbs\n              onSearchOpen={() => setIsSearchOpen(true)}\n              theme={theme}\n              setTheme={setTheme}\n              showThemeToggle={showThemeToggle}\n            />\n\n            {/* Header (optional) */}\n            {shouldShowHeader && header && (\n              <header className=\"border-b\">{header}</header>\n            )}\n\n            <main className=\"flex-1 overflow-y-auto\">\n              <div\n                className={cn(\n                  \"mx-auto\",\n                  layoutMode === \"default\" && \"max-w-6xl p-5 md:p-8 lg:p-10\",\n                  layoutMode === \"wide\" && \"max-w-7xl p-5 md:p-8 lg:p-10\",\n                  layoutMode === \"full\" && \"max-w-full p-4 md:p-6\",\n                  layoutMode === \"immersive\" && \"max-w-full p-0\",\n                )}\n              >\n                {children}\n              </div>\n            </main>\n\n            {/* Footer (optional) */}\n            {shouldShowFooter && footer && (\n              <footer className=\"border-t\">{footer}</footer>\n            )}\n          </SidebarInset>\n        </SidebarProvider>\n\n        {/* Toast notifications */}\n        <Toaster theme={theme} {...toasterProps} />\n      </div>\n    </BreadcrumbProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsJA,SAAS,eAAe,OAQtB;CAEA,MAAM,kBAAkB,eAAe,MAAM,EAAE,WAAW;CAC1D,MAAM,iBAAiB,eAAe,MAAM,EAAE,UAAU;CACxD,MAAM,gBAAgB,eAAe,MAAM,EAAE,SAAS;AAEtD,QAAO;EACL,YAAY,MAAM,cAAc;EAChC,WAAW,MAAM,aAAa;EAC9B,UAAU,MAAM,YAAY;EAC7B;;;;;AAUH,SAAS,2BACP,OACA;CACA,MAAM,cAAc,uBAAuB;AAC3C,QAAO,oBAAC;EAAY,GAAI;EAAoB;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7D,SAAgB,YAAY,EAC1B,YAAY,gBACZ,eACA,aACA,WAAW,UACX,WAAW,eACX,kBAAkB,uBAAuB,OACzC,UACA,WACA,cACA,QACA,QACA,UAAU,cACV,QAAQ,UACR,UACA,iBACA,cACA,aAAa,aAC0B;CAEvC,MAAM,mBAAmB,CAAC,CAAC;CAC3B,MAAM,mBAAmB,CAAC,CAAC;CAE3B,MAAM,EAAE,YAAY,WAAW,aAAa,eAAe;EACzD,YAAY;EACZ,WAAW;EACX,UAAU;EACX,CAAC;CAEF,MAAM,CAAC,cAAc,mBAAmBA,QAAM,SAAS,MAAM;AAG7D,SAAM,gBAAgB;EACpB,MAAM,QAAQ,MAAqB;AACjC,OAAI,EAAE,QAAQ,QAAQ,EAAE,WAAW,EAAE,UAAU;AAC7C,MAAE,gBAAgB;AAClB,oBAAgB,KAAK;;;AAGzB,WAAS,iBAAiB,WAAW,KAAK;AAC1C,eAAa,SAAS,oBAAoB,WAAW,KAAK;IACzD,EAAE,CAAC;AAEN,QACE,oBAAC,gCACC,qBAAC;EACC,WAAW,GAAG,4CAA4C,UAAU;;GAGpE,oBAAC;IACC,QAAQ;IACR,eAAe,gBAAgB,MAAM;IAC3B;IACA;KACV;GAGF,qBAAC;IACC,aAAa,CAAC;IACd,WAAU;eAGV,oBAAC;KACC,YAAY;KACG;KACF;KACH;KACV,WAAW;KACX,GAAI;MACJ,EAGF,qBAAC;KAAa,WAAU;;MACtB,oBAAC;OACC,oBAAoB,gBAAgB,KAAK;OAClC;OACG;OACO;QACjB;MAGD,oBAAoB,UACnB,oBAAC;OAAO,WAAU;iBAAY;QAAgB;MAGhD,oBAAC;OAAK,WAAU;iBACd,oBAAC;QACC,WAAW,GACT,WACA,eAAe,aAAa,gCAC5B,eAAe,UAAU,gCACzB,eAAe,UAAU,yBACzB,eAAe,eAAe,iBAC/B;QAEA;SACG;QACD;MAGN,oBAAoB,UACnB,oBAAC;OAAO,WAAU;iBAAY;QAAgB;;MAEnC;KACC;GAGlB,oBAAC;IAAe;IAAO,GAAI;KAAgB;;GACvC,GACa"}

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

@@ -0,0 +1,7 @@
+import { Admin } from "../../builder/admin.mjs";
+import "./admin-sidebar.mjs";
+import { AdminProvider } from "../../runtime/provider.mjs";
+import { QueryClient } from "@tanstack/react-query";
+import { QuestpieClient } from "questpie/client";
+import "react";
+import { Questpie } from "questpie";