@questpie/admin 1.1.1 → 3.0.0

package/dist/client/runtime/provider.mjs

@@ -0,0 +1,393 @@
+import { Admin } from "../builder/admin.mjs";
+import { I18nProvider } from "../i18n/hooks.mjs";
+import { adminMessages } from "../i18n/messages.mjs";
+import { createSimpleI18n } from "../i18n/simple.mjs";
+import { getCookie } from "../lib/cookies.mjs";
+import { buildNavigation } from "./routes.mjs";
+import { TranslationsProvider, getUiLocaleFromCookie as getUiLocaleFromCookie$1 } from "./translations-provider.mjs";
+import { ContentLocalesProvider } from "./content-locales-provider.mjs";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { DEFAULT_LOCALE } from "questpie/shared";
+import { createStore, useStore } from "zustand";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/runtime/provider.tsx
+/** Cookie for UI locale (admin interface language) */
+const UI_LOCALE_COOKIE = "questpie_ui_locale";
+/** Cookie for content locale (content language) */
+const CONTENT_LOCALE_COOKIE = "questpie_content_locale";
+/** Cookie max age (1 year) */
+const LOCALE_COOKIE_MAX_AGE = 3600 * 24 * 365;
+const LEGACY_LOCALE_COOKIE = "questpie_locale";
+function setCookie(name, value) {
+	if (typeof document === "undefined") return;
+	document.cookie = `${name}=${value}; path=/; max-age=${LOCALE_COOKIE_MAX_AGE}; SameSite=Lax`;
+}
+function getUiLocaleFromCookie() {
+	return getCookie(UI_LOCALE_COOKIE) ?? getCookie(LEGACY_LOCALE_COOKIE);
+}
+function getContentLocaleFromCookie() {
+	return getCookie(CONTENT_LOCALE_COOKIE) ?? getCookie(LEGACY_LOCALE_COOKIE);
+}
+function setUiLocaleCookie(locale) {
+	setCookie(UI_LOCALE_COOKIE, locale);
+}
+function setContentLocaleCookie(locale) {
+	setCookie(CONTENT_LOCALE_COOKIE, locale);
+}
+function createAdminStore({ admin, client, authClient, basePath, navigate, realtime, initialContentLocale }) {
+	if (client && initialContentLocale && "setLocale" in client) client.setLocale(initialContentLocale);
+	return createStore((set) => ({
+		admin,
+		client,
+		authClient,
+		basePath,
+		navigate,
+		realtime,
+		contentLocale: initialContentLocale,
+		setContentLocale: (newLocale) => {
+			setContentLocaleCookie(newLocale);
+			set({ contentLocale: newLocale });
+		},
+		navigation: buildNavigation(admin, { basePath }),
+		brandName: "Admin"
+	}));
+}
+const AdminStoreContext = createContext(null);
+/**
+* Merge admin messages with custom translations
+*/
+function mergeMessages(baseMessages, customTranslations) {
+	const result = { en: { ...baseMessages } };
+	if (!customTranslations) return result;
+	for (const [locale, messages] of Object.entries(customTranslations)) result[locale] = {
+		...result[locale] ?? {},
+		...messages
+	};
+	return result;
+}
+function LegacyI18nProvider(t0) {
+	const $ = c(11);
+	const { admin, locale, localeConfig, defaultLocale, customI18nAdapter, children } = t0;
+	let t1;
+	if ($[0] !== admin || $[1] !== customI18nAdapter || $[2] !== defaultLocale || $[3] !== locale || $[4] !== localeConfig) {
+		t1 = () => {
+			if (customI18nAdapter) return customI18nAdapter;
+			const messages = mergeMessages(adminMessages, admin.getTranslations());
+			return createSimpleI18n({
+				locale,
+				locales: localeConfig.supported ?? [DEFAULT_LOCALE],
+				messages,
+				fallbackLocale: defaultLocale,
+				onLocaleChange: setUiLocaleCookie
+			});
+		};
+		$[0] = admin;
+		$[1] = customI18nAdapter;
+		$[2] = defaultLocale;
+		$[3] = locale;
+		$[4] = localeConfig;
+		$[5] = t1;
+	} else t1 = $[5];
+	const [i18nAdapter] = useState(t1);
+	let t2;
+	if ($[6] !== children) {
+		t2 = /* @__PURE__ */ jsx(ContentLocalesProvider, { children });
+		$[6] = children;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== i18nAdapter || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(I18nProvider, {
+			adapter: i18nAdapter,
+			children: t2
+		});
+		$[8] = i18nAdapter;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+}
+/**
+* Admin provider component
+*
+* Creates a scoped Zustand store for admin state management.
+* Use `useAdminStore(selector)` to access state with optimized re-renders.
+*
+* @example
+* ```tsx
+* import { AdminProvider, useAdminStore } from "@questpie/admin/runtime";
+*
+* function App() {
+*   return (
+*     <AdminProvider admin={admin} client={client}>
+*       <MyComponent />
+*     </AdminProvider>
+*   );
+* }
+*
+* function MyComponent() {
+*   // Only re-renders when locale changes
+*   const locale = useAdminStore((s) => s.locale);
+*   const setLocale = useAdminStore((s) => s.setLocale);
+*   // ...
+* }
+* ```
+*/
+function AdminProvider(t0) {
+	const $ = c(49);
+	const { admin: adminInput, client, authClient, basePath: t1, realtime, navigate: navigateProp, initialUiLocale, initialContentLocale, i18nAdapter: customI18nAdapter, useServerTranslations: t2, translationsFallback, children } = t0;
+	const basePath = t1 === void 0 ? "/admin" : t1;
+	const useServerTranslations = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[0] !== adminInput) {
+		t3 = Admin.normalize(adminInput);
+		$[0] = adminInput;
+		$[1] = t3;
+	} else t3 = $[1];
+	const admin = t3;
+	let t4;
+	if ($[2] !== navigateProp) {
+		t4 = (path) => {
+			if (navigateProp) {
+				navigateProp(path);
+				return;
+			}
+			if (typeof window !== "undefined") window.location.href = path;
+		};
+		$[2] = navigateProp;
+		$[3] = t4;
+	} else t4 = $[3];
+	const navigate = t4;
+	let t5;
+	if ($[4] !== admin) {
+		t5 = admin.getLocale();
+		$[4] = admin;
+		$[5] = t5;
+	} else t5 = $[5];
+	const localeConfig = t5;
+	const defaultLocale = localeConfig.default ?? DEFAULT_LOCALE;
+	let t6;
+	if ($[6] !== defaultLocale || $[7] !== initialUiLocale || $[8] !== useServerTranslations) {
+		t6 = useServerTranslations ? initialUiLocale ?? getUiLocaleFromCookie$1() ?? defaultLocale : initialUiLocale ?? getUiLocaleFromCookie() ?? defaultLocale;
+		$[6] = defaultLocale;
+		$[7] = initialUiLocale;
+		$[8] = useServerTranslations;
+		$[9] = t6;
+	} else t6 = $[9];
+	const resolvedUiLocale = t6;
+	let t7;
+	if ($[10] !== defaultLocale || $[11] !== initialContentLocale) {
+		t7 = initialContentLocale ?? getContentLocaleFromCookie() ?? defaultLocale;
+		$[10] = defaultLocale;
+		$[11] = initialContentLocale;
+		$[12] = t7;
+	} else t7 = $[12];
+	const resolvedContentLocale = t7;
+	const t8 = typeof realtime === "boolean" ? realtime : realtime?.enabled ?? true;
+	let t9;
+	if ($[13] !== t8) {
+		t9 = { enabled: t8 };
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	const realtimeConfig = t9;
+	let t10;
+	if ($[15] !== admin || $[16] !== authClient || $[17] !== basePath || $[18] !== client || $[19] !== navigate || $[20] !== realtimeConfig || $[21] !== resolvedContentLocale) {
+		t10 = () => createAdminStore({
+			admin,
+			client,
+			authClient: authClient ?? null,
+			basePath,
+			navigate,
+			realtime: realtimeConfig,
+			initialContentLocale: resolvedContentLocale
+		});
+		$[15] = admin;
+		$[16] = authClient;
+		$[17] = basePath;
+		$[18] = client;
+		$[19] = navigate;
+		$[20] = realtimeConfig;
+		$[21] = resolvedContentLocale;
+		$[22] = t10;
+	} else t10 = $[22];
+	const [store] = useState(t10);
+	let t11;
+	let t12;
+	if ($[23] !== admin || $[24] !== authClient || $[25] !== basePath || $[26] !== client || $[27] !== navigate || $[28] !== realtimeConfig || $[29] !== store) {
+		t11 = () => {
+			const current = store.getState();
+			const nextAuthClient = authClient ?? null;
+			const patch = {};
+			if (current.admin !== admin || current.basePath !== basePath) {
+				patch.admin = admin;
+				patch.basePath = basePath;
+				patch.navigation = buildNavigation(admin, { basePath });
+			}
+			if (current.client !== client) patch.client = client;
+			if (current.authClient !== nextAuthClient) patch.authClient = nextAuthClient;
+			if (current.navigate !== navigate) patch.navigate = navigate;
+			if (current.realtime.enabled !== realtimeConfig.enabled) patch.realtime = realtimeConfig;
+			if (Object.keys(patch).length > 0) store.setState(patch);
+		};
+		t12 = [
+			admin,
+			basePath,
+			realtimeConfig,
+			client,
+			authClient,
+			navigate,
+			store
+		];
+		$[23] = admin;
+		$[24] = authClient;
+		$[25] = basePath;
+		$[26] = client;
+		$[27] = navigate;
+		$[28] = realtimeConfig;
+		$[29] = store;
+		$[30] = t11;
+		$[31] = t12;
+	} else {
+		t11 = $[30];
+		t12 = $[31];
+	}
+	useEffect(t11, t12);
+	const contentLocale = useStore(store, _temp);
+	let t13;
+	let t14;
+	if ($[32] !== client || $[33] !== contentLocale) {
+		t13 = () => {
+			if (client && contentLocale && "setLocale" in client) client.setLocale(contentLocale);
+		};
+		t14 = [client, contentLocale];
+		$[32] = client;
+		$[33] = contentLocale;
+		$[34] = t13;
+		$[35] = t14;
+	} else {
+		t13 = $[34];
+		t14 = $[35];
+	}
+	useEffect(t13, t14);
+	let t15;
+	if ($[36] !== admin || $[37] !== children || $[38] !== customI18nAdapter || $[39] !== defaultLocale || $[40] !== localeConfig || $[41] !== resolvedUiLocale || $[42] !== translationsFallback || $[43] !== useServerTranslations) {
+		t15 = useServerTranslations ? /* @__PURE__ */ jsx(TranslationsProvider, {
+			initialLocale: resolvedUiLocale,
+			fallback: translationsFallback,
+			children: /* @__PURE__ */ jsx(ContentLocalesProvider, { children })
+		}) : /* @__PURE__ */ jsx(LegacyI18nProvider, {
+			admin,
+			locale: resolvedUiLocale,
+			localeConfig,
+			defaultLocale,
+			customI18nAdapter,
+			children
+		});
+		$[36] = admin;
+		$[37] = children;
+		$[38] = customI18nAdapter;
+		$[39] = defaultLocale;
+		$[40] = localeConfig;
+		$[41] = resolvedUiLocale;
+		$[42] = translationsFallback;
+		$[43] = useServerTranslations;
+		$[44] = t15;
+	} else t15 = $[44];
+	const i18nContent = t15;
+	let t16;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(BrandingSync, {});
+		$[45] = t16;
+	} else t16 = $[45];
+	let t17;
+	if ($[46] !== i18nContent || $[47] !== store) {
+		t17 = /* @__PURE__ */ jsxs(AdminStoreContext.Provider, {
+			value: store,
+			children: [t16, i18nContent]
+		});
+		$[46] = i18nContent;
+		$[47] = store;
+		$[48] = t17;
+	} else t17 = $[48];
+	return t17;
+}
+function _temp(s) {
+	return s.contentLocale;
+}
+function BrandingSync() {
+	const $ = c(3);
+	const store = useContext(AdminStoreContext);
+	let t0;
+	let t1;
+	if ($[0] !== store) {
+		t0 = () => {
+			if (!store) return;
+			const client = store.getState().client;
+			if (!client || !client.routes?.getAdminConfig) return;
+			client.routes.getAdminConfig().then((config) => {
+				if (config?.branding?.name) {
+					const name = config.branding.name;
+					const resolved = typeof name === "string" ? name : typeof name === "object" && name !== null ? name.en ?? Object.values(name)[0] ?? "Admin" : "Admin";
+					store.setState({ brandName: resolved });
+				}
+			}).catch(_temp2);
+		};
+		t1 = [store];
+		$[0] = store;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	return null;
+}
+/**
+* Access admin store with a selector for optimized re-renders.
+*
+* @example
+* ```tsx
+* // Only re-renders when locale changes
+* const locale = useAdminStore((s) => s.locale);
+*
+* // Get multiple values (re-renders when any changes)
+* const { admin, client } = useAdminStore((s) => ({
+*   admin: s.admin,
+*   client: s.client,
+* }));
+*
+* // Get navigation (computed once)
+* const navigation = useAdminStore((s) => s.navigation);
+* ```
+*/
+function _temp2() {}
+function useAdminStore(selector) {
+	const store = useContext(AdminStoreContext);
+	if (!store) throw new Error("useAdminStore must be used within AdminProvider. Wrap your app with <AdminProvider admin={admin} client={client}>");
+	return useStore(store, selector);
+}
+/** Select admin instance */
+const selectAdmin = (s) => s.admin;
+/** Select client instance */
+const selectClient = (s) => s.client;
+/** Select auth client instance */
+const selectAuthClient = (s) => s.authClient;
+/** Select base path */
+const selectBasePath = (s) => s.basePath;
+/** Select navigate function */
+const selectNavigate = (s) => s.navigate;
+/** Select realtime config */
+const selectRealtime = (s) => s.realtime;
+/** Select current content locale (content language) */
+const selectContentLocale = (s) => s.contentLocale;
+/** Select setContentLocale function */
+const selectSetContentLocale = (s) => s.setContentLocale;
+/** Select brand name */
+const selectBrandName = (s) => s.brandName;
+
+//#endregion
+export { AdminProvider, selectAdmin, selectAuthClient, selectBasePath, selectBrandName, selectClient, selectContentLocale, selectNavigate, selectRealtime, selectSetContentLocale, useAdminStore };

package/dist/client/runtime/routes.d.mts

@@ -0,0 +1,49 @@
+import { I18nText } from "../i18n/types.mjs";
+import { IconComponent } from "../builder/types/common.mjs";
+import { ComponentReference } from "../../server/augmentation/common.mjs";
+import "../../server/augmentation.mjs";
+import "../builder/admin.mjs";
+import "../builder/index.mjs";
+import { QuestpieApp } from "questpie/client";
+
+//#region src/client/runtime/routes.d.ts
+
+/**
+ * Navigation item (clickable link)
+ */
+type NavigationItem = {
+  id: string;
+  label: I18nText;
+  href: string;
+  /** Icon - can be a React component or a server-defined ComponentReference */
+  icon?: IconComponent | ComponentReference;
+  group?: string;
+  order?: number;
+  type: "collection" | "global" | "page" | "link";
+};
+/**
+ * Navigation divider (visual separator)
+ */
+type NavigationDivider = {
+  type: "divider";
+};
+/**
+ * Any navigation element (item or divider)
+ */
+type NavigationElement = NavigationItem | NavigationDivider;
+/**
+ * Navigation group/section
+ */
+type NavigationGroup = {
+  id?: string;
+  label?: I18nText;
+  /** Icon - can be a React component or a server-defined ComponentReference */
+  icon?: IconComponent | ComponentReference;
+  /** Whether this section can be collapsed/expanded by the user */
+  collapsible?: boolean;
+  items?: NavigationElement[];
+  /** Nested subsections */
+  sections?: NavigationGroup[];
+};
+//#endregion
+export { NavigationGroup, NavigationItem };

package/dist/client/runtime/routes.mjs

@@ -0,0 +1,91 @@
+import { formatLabel } from "../lib/utils.mjs";
+import { isComponentReference } from "../components/component-renderer.mjs";
+
+//#region src/client/runtime/routes.ts
+/**
+* Build type-safe routes from admin configuration
+*
+* @example
+* ```ts
+* import { buildRoutes } from "@questpie/admin/runtime";
+* import { appAdmin } from "./admin";
+*
+* const routes = buildRoutes(appAdmin);
+*
+* // Type-safe route generation
+* routes.dashboard(); // "/admin"
+* routes.collections.posts.list(); // "/admin/collections/posts"
+* routes.collections.posts.edit("123"); // "/admin/collections/posts/123/edit"
+* routes.globals.settings.edit(); // "/admin/globals/settings"
+* ```
+*/
+function buildRoutes(admin, options = {}) {
+	const { basePath = "/admin" } = options;
+	const path = (...segments) => [basePath, ...segments].filter(Boolean).join("/");
+	const collections = {};
+	const globals = {};
+	const pageConfigs = admin.getPages();
+	const pages = {};
+	for (const [name, config] of Object.entries(pageConfigs)) {
+		const pagePath = config.path ?? name;
+		pages[name] = { view: () => pagePath.startsWith("/") ? pagePath : path("pages", pagePath) };
+	}
+	return {
+		dashboard: () => basePath,
+		collections,
+		globals,
+		pages,
+		auth: {
+			login: () => path("auth", "login"),
+			logout: () => path("auth", "logout"),
+			forgotPassword: () => path("auth", "forgot-password"),
+			resetPassword: (token) => path("auth", "reset-password", token)
+		}
+	};
+}
+/**
+* Build client-only page navigation from admin configuration.
+* Sidebar is driven by server config; this only provides
+* client-registered pages as a fallback lookup for useServerNavigation.
+*/
+function buildNavigation(admin, options = {}) {
+	const routes = buildRoutes(admin, options);
+	const items = [];
+	for (const [name, config] of Object.entries(admin.getPages())) {
+		if (config.showInNav === false) continue;
+		items.push({
+			id: `page:${name}`,
+			label: resolveLabel(config.label, name),
+			href: routes.pages[name].view(),
+			icon: resolveIcon(config.icon),
+			group: config.group,
+			order: config.order ?? 0,
+			type: "page"
+		});
+	}
+	return items.length > 0 ? [{ items }] : [];
+}
+/**
+* Resolve label - passes through I18nText for runtime resolution
+*/
+function resolveLabel(label, fallback) {
+	if (typeof label === "string") return label;
+	if (typeof label === "object" && label !== null) return label;
+	return formatLabel(fallback);
+}
+/**
+* Resolve icon to IconComponent or ComponentReference.
+* Handles:
+* - React components (IconComponent)
+* - Server-defined component references ({ type: "icon", props: { name: "..." } })
+* - undefined/null
+*/
+function resolveIcon(icon) {
+	if (!icon) return;
+	if (isComponentReference(icon)) return icon;
+	if (typeof icon === "function") return icon;
+	if (typeof icon === "object" && icon !== null && "$$typeof" in icon) return icon;
+}
+
+//#endregion
+export { buildNavigation };